Podczas korzystania z inline-block
elementów zawsze będzie istniał whitespace
problem między tymi elementami (szerokość ta wynosi około ~ 4 piksele).
Więc twoje dwa divs
, z których oba mają 50% szerokości, plus ten whitespace
(~ 4px) ma ponad 100% szerokości, więc pęka. Przykład twojego problemu:
body{
margin: 0;
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
Jest kilka sposobów, aby to naprawić:
1. Brak odstępu między tymi elementami
body{
margin: 0;
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
2. Korzystanie z komentarzy HTML
body{
margin: 0;
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div><div class="right">bar</div>
3. Ustaw rodziców font-size
na 0
, a następnie dodaj wartość do inline-block
elementów
body{
margin: 0;
}
.parent{
font-size: 0;
}
.parent > div{
display: inline-block;
width: 50%;
font-size: 16px;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="parent">
<div class="left">foo</div>
<div class="right">bar</div>
</div>
4. Stosowanie między nimi ujemnego marginesu ( nie zalecane )
body{
margin: 0;
}
div{
display: inline-block;
width: 50%;
margin-right: -4px;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div>
<div class="right">bar</div>
5. Opadający kąt zamknięcia
body{
margin: 0;
}
div{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<div class="left">foo</div
><div class="right">bar</div>
<hr>
<div class="left">foo</div><div class="right">
bar</div>
6. Pomijanie niektórych tagów zamykających HTML (dzięki @thirtydot za odniesienie )
body{
margin: 0;
}
ul{
margin: 0;
padding: 0;
}
li{
display: inline-block;
width: 50%;
}
.left{
background-color: aqua;
}
.right{
background-color: gold;
}
<ul>
<li class="left">foo
<li class="right">bar
</ul>
Bibliografia:
- Walka z przestrzenią między wbudowanymi elementami blokowymi w sztuczkach CSS
- Usuń odstępy między elementami wbudowanymi w blok autorstwa Davida Walsha
- Jak usunąć odstępy między elementami inline-block?
Jak @ MarcosPérezGude powiedział The najlepszym sposobem jest użycie rem
i dodać jakąś wartość domyślną font-size
na html
znaczniku (jak w HTML5Boilerplate ). Przykład:
html{
font-size: 1em;
}
.ib-parent{
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
Aktualizacja : ponieważ jest prawie 2018 r., Użyj flexboksa lub jeszcze lepiej - układu siatki CSS .