При использовании inline-block
элементов всегда будет whitespace
проблема между этими элементами (это пространство составляет около 4 пикселей в ширину).
Итак, ваши два divs
, которые имеют ширину 50%, плюс то, что whitespace
(~ 4px) имеют ширину более 100%, и поэтому он ломается. Пример вашей проблемы:
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>
Есть несколько способов исправить это:
1. Между этими элементами нет пробелов.
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. Использование комментариев 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. Установите для родителей font-size
значение 0
, а затем добавив значение inline-block
элементам
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. Использование отрицательного поля между ними ( не желательно ).
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. Падение закрывающего угла
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. Пропуск определенных закрывающих тегов HTML (спасибо @thirtydot за ссылку )
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>
Ссылки:
- Борьба с пространством между встроенными блочными элементами с помощью приемов CSS
- Удаление пробелов между элементами встроенного блока, Дэвид Уолш
- Как убрать пробел между inline-block элементами?
Как @ MarcosPérezGude сказал , то лучший способ заключается в использовании rem
, а также добавить значение по умолчанию некоторые font-size
на html
метке (например , в HTML5Boilerplate ). Пример:
html{
font-size: 1em;
}
.ib-parent{
font-size: 0;
}
.ib-child{
display: inline-block;
font-size: 1rem;
}
Обновление : поскольку приближается 2018 год, используйте flexbox или, что еще лучше, макет сетки CSS .