Ik heb twee inline-block div
elementen, 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 inline
elementen 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 inline
elementen wordt bepaald door de font-size
, kunt u eenvoudig de font-size
resetten naar 0
, en verwijder zo de ruimte tussen de elementen.
Stel gewoon font-size: 0
in op de parent-elementen, en declareer dan een nieuwe font-size
voor 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-size
van 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 inline
elementen.
Methode 3 – Stel het bovenliggende element in op display: flex
In sommige gevallen kunt u ook de display
van 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-block
zorgt 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-size
van 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 float
te plaatsen. (bijv. float: left;
) Verder moet elke id
uniek zijn, wat betekent dat je dezelfde id
niet twee keer kunt gebruiken in hetzelfde HTML
-document. Je zou in plaats daarvan klassen moeten gebruiken, waar je dezelfde class
voor 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-block
schrijft, er een extra margin-right:4px
nodig is. Je moet het dus verwijderen.