Waarom “Inline-Block” werkt niet goed in deze CSS?

Controleer de CSS hieronder.

/*rex is the container of ex,ex2,ex3*/
div.rex{
height:200px;
border:0px;
margin:60px auto;
padding: 0;
vertical-align:top;
}
div.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex2{
width:0.5%;
height:200px;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}
div.ex3{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
margin: 0;
padding: 0;
vertical-align:top;
}

Het resultaat in browser:

Wat ik nodig heb:

Antwoord 1, Autoriteit 100%

Dit is eigenlijk verwacht gedrag in HTML. Omdat u inline-blok gebruikt, wordt elke nieuwlijn of witruimte die u na het element hebt en vóór een ander inline-element, wordt geteld als een ruimte. Als u wilt dat de blokken naast elkaar zijn, zoals op uw foto, moet uw HTML zo zijn.

<div class="rex">
    <div class="ex"></div><div class="ex2"></div><div class="ex3"></div>
</div>

werkdemo

Het is niet erg mooi, maar nogmaals, ik zou aanraden om een ​​andere aanpak te gebruiken, mogelijk in plaats daarvan de elementen drijven.

Raadpleeg hier voor een meer diepgaande uitleg van waarom dit gebeurt.

Hoe verwijder ik de ruimte tussen inline-block-elementen?

Antwoord 2, autoriteit 6%

Gewoon hier het antwoord van @Tristan uitbreiden.

Je hebt de css-code onnodig herhaald. Je kunt het verkleinen door meerdere CSS te gebruiken, zoals:

.ex, .ex2, .ex3 {
    display: inline-block;
    vertical-align: top;
    margin: 0;
    padding: 0;
    height: 100%;  /* no need of height: 200px; here */
}                  /* if you need to extend it to parent height */
                   /* then use height: 100% */

OF

div.rex > div { /* code here */ }

Je kunt elementen naast elkaar houden door een van de onderstaande benaderingen te gebruiken:

• Display gebruiken: table-cell

• Drijven gebruiken: links

• Display gebruiken: inline-block (controleer de oplossing van @Tristan)

Antwoord 3, autoriteit 3%

Voeg in plaats daarvan float:left;toe aan uw div.ex, div.ex2en div.ex3.

JSFIDDLE

UPDATE:
Voeg position:absolutetoe aan de tweede en derde div als floatgeen keuze is.

FIDDLE

UPDATE 2:
Voeg dit alleen toe aan de 3e div als je die ruimte ertussen nodig hebt.

FIDDLE

Antwoord 4, autoriteit 3%

Je kunt zulke opmerkingen aanklagen (dit ziet er in code iets beter uit):

<div class="rex">
    <div class="ex"><!--
 --></div><div class="ex2"></div><!--
 --><div class="ex3"></div>
</div>

Antwoord 5

Mijn truc is om font-size:0 in te stellen; in het bovenliggende element, omdat het de lettergrootte is die ervoor zorgt dat de wiskunde niet perfect optelt (ongeveer een 4px overlap per div, afhankelijk van de schermgrootte) en ervoor zorgt dat de ene div onder de andere verschijnt.

.rex{
display:block;
font-size:0;
}
.ex{
width:34%;
height:200px;
background-color:#4f443a;
display:inline-block;
vertical-align:top;
margin: 0 .5% 0 0; /*small space between divs*/
padding: 0;
font-size:16px; /*restore font size*/
}
.ex2{
width:65.5%;
height:200px;
background-color:#7e8547;
display:inline-block;
vertical-align:top;
margin: 0;
padding: 0;
font-size:16px;
}