Waarom is er een onverklaarbare kloof tussen deze inline-block div-elementen?

Ik heb twee inline-block divelementen, die hetzelfde zijn, naast elkaar geplaatst. Er lijkt echter een mysterieuze ruimte van 4 pixels tussen de twee div’s te zijn, ondanks dat de marge is ingesteld op 0. Er zijn geen bovenliggende div’s die ze beïnvloeden – Wat is er aan de hand?

CSS

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
}

Dit is hoe ik wil dat het eruit ziet:


Antwoord 1, autoriteit 100%

In dit geval zijn uw div-elementen gewijzigd van block-niveau-elementen in inline-elementen. Een typisch kenmerk van inlineelementen is dat ze de witruimte in de opmaak respecteren. Dit verklaart waarom er een openingaan ruimte tussen de elementen wordt gegenereerd. (voorbeeld)

Er zijn een paar oplossingen die kunnen worden gebruikt om dit op te lossen.

Methode 1 – Verwijder de witruimte uit de opmaak

Voorbeeld 1– Reageer op de witruimte: (voorbeeld)

<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>

Voorbeeld 2– Verwijder de regeleinden: (voorbeeld)

<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>

Voorbeeld 3– Sluit een deel van de tag op de volgende regel (voorbeeld)

<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>

Voorbeeld 4– Sluit de hele tag op de volgende regel: (voorbeeld)

<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>

Methode 2 – Reset de font-size

Aangezien de witruimte tussen de inlineelementen wordt bepaald door de font-size, kunt u eenvoudig de font-sizeresetten naar 0, en verwijder zo de ruimte tussen de elementen.

Stel gewoon font-size: 0in op de parent-elementen, en declareer dan een nieuwe font-sizevoor de onderliggende elementen. Dit werkt, zoals hier wordt aangetoond (voorbeeld)

#parent {
    font-size: 0;
}
#child {
    font-size: 16px;
}

Deze methode werkt redelijk goed, omdat er geen wijziging in de opmaak nodig is; het werkt echter niet als de font-sizevan het onderliggende element wordt gedeclareerd met eenheden van em. Ik zou daarom aanraden om de witruimte uit de opmaak te verwijderen, of als alternatief de elementen te laten zwevenen dus het vermijden van de ruimte gegenereerd door inlineelementen.

Methode 3 – Stel het bovenliggende element in op display: flex

In sommige gevallen kunt u ook de displayvan het bovenliggende element instellen op flex. (voorbeeld)

Dit verwijdert effectief de spaties tussen de elementen in ondersteunde browsers. Vergeet niet de juiste leveranciersvoorvoegsels toe te voegen voor extra ondersteuning.

.parent {
    display: flex;
}
.parent > div {
    display: inline-block;
    padding: 1em;
    border: 2px solid #f00;
}

Antwoord 2, autoriteit 6%

Het gebruik van inline-blockzorgt voor witruimte in uw HTML, dit komt meestal neer op .25em (of 4px).

Je kunt ofwel commentaar geven op de witruimte of, een meer gebruikelijke oplossing, is om de font-sizevan de ouder in te stellen op 0 en het terug te zetten naar de vereiste grootte op het inline-blok elementen.


Antwoord 3, autoriteit 3%

De eenvoudigste oplossing is om de container gewoon floatte plaatsen. (bijv. float: left;) Verder moet elke iduniek zijn, wat betekent dat je dezelfde idniet twee keer kunt gebruiken in hetzelfde HTML-document. Je zou in plaats daarvan klassen moeten gebruiken, waar je dezelfde classvoor meerdere elementen kunt gebruiken.

.container {
    position: relative;
    background: rgb(255, 100, 0);
    margin: 0;
    width: 40%;
    height: 100px;
    float: left;
}

Antwoord 4

Een oplossing gevonden waarbij Flex niet betrokken is, omdat Flex niet werkt in oudere browsers.
Voorbeeld:

.container {
    display:block;
    position:relative;
    height:150px;
    width:1024px;
    margin:0 auto;
    padding:0px;
    border:0px;
    background:#ececec;
    margin-bottom:10px;
    text-align:justify;
    box-sizing:border-box;
    white-space:nowrap;
    font-size:0pt;
    letter-spacing:-1em;
}
.cols {
    display:inline-block;
    position:relative;
    width:32%;
    height:100%;
    margin:0 auto;
    margin-right:2%;
    border:0px;
    background:lightgreen;  
    box-sizing:border-box;
    padding:10px;
    font-size:10pt;
    letter-spacing:normal;
}
.cols:last-child {
    margin-right:0;
}

Antwoord 5

voeg gewoon een rand toe: 2px solid #e60000; naar uw 2e div-tag CSS.

Het werkt zeker

#Div2Id {
    border: 2px solid #e60000; --> color is your preference
}

Antwoord 6

Je moet toevoegen

#container
{
    display:inline-block;
    position:relative;
    background:rgb(255,100,0);
    margin:0px;
    width:40%;
    height:100px;
    margin-right:-4px;
}

omdat wanneer je display:inline-blockschrijft, er een extra margin-right:4pxnodig is. Je moet het dus verwijderen.

Other episodes