Пробел между div
У меня проблема, когда между двумя div появляется пробел, и я не знаю, что это вызывает. По сути, это всего лишь один блок с тремя меньшими блоками фиксированной высоты внутри него. Пространство находится между разделами block-title и block-content. Между block-content и block-footer нет места
Вот HTML:
<div class = "block buy">
<div class = "block-title">
<span class = "line-1">Title</span>
</div>
<div class = "block-content">
<h2></h2>
</div>
<div class = "block-footer">
</div>
</div>
А вот CSS:
.block {
width: 300px;
margin-left: auto;
margin-right: 15px;
display: inline-block;
vertical-align: top;
margin-top: 35px;
font-weight: 400;
text-align: left;
}
.block-title {
height: 70px;
padding: 20px;
}
.block-content {
width: 100%;
height: 255px;
text-align: center;
}
.block-footer {
height: 75px;
}
.block-title,
.block-content,
.block-footer {
color: #fff;
}
.line-1 {
font-weight: 300;
font-size: 20px;
display: block;
}
.buy > * {
background-color: #558F38;
}
Живой JSfiddle здесь: JSFiddle
Есть идеи, почему это происходит?
Редактировать
Итак, причина появления пробела в том, что поле элементов <h2> выходит за пределы содержащего div. Почему его нет в div?
Ответы 4
У вашего h2 есть маржа, которая выходит из контейнера и выталкивает внешние div. Удалите h2 или удалите его край.
Спасибо, это была проблема. Но почему запас <h2> выходит за пределы содержащего <div>?
Это единственный пост, который действительно отвечает на вопрос.
Поля иногда ведут себя нелогично, вы можете узнать больше об этих причудах из developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/…. В вашем примере запас, необходимый для отталкивания чего-либо, он не касается родительских div, но братья и сестры / дяди и т. д. Все допустимы, чтобы нажимать и вызывать поведение, которое вы видели.
@ martin36 Также Google за "схлопывающиеся поля".
Спасибо я сделаю это
добавить этот курс или удалить
from second divh2 {
margin: 0;
}
.block {
width: 300px;
margin-left: auto;
margin-right: 15px;
display: inline-block;
vertical-align: top;
margin-top: 35px;
font-weight: 400;
text-align: left;
}
.block-title {
height: 70px;
padding: 20px;
}
.block-content {
width: 100%;
height: 255px;
text-align: center;
}
.block-footer {
height: 75px;
}
.block-title, .block-content, .block-footer {
color: #fff;
}
.line-1 {
font-weight: 300;
font-size: 20px;
display: block;
}
.buy > * {
background-color: #558F38;
}
h2 {
margin: 0;
}<div class = "block buy">
<div class = "block-title">
<span class = "line-1">Title</span>
</div>
<div class = "block-content">
<h2></h2>
</div>
<div class = "block-footer">
</div>
</div>Вопрос в том, почему, а не как это исправить.
@rob h2 имеет маржу, которая выходит из контейнера и выталкивает внешние блоки div.
Да. Я знаю это. Вы должны были указать это в своем ответе, а не в качестве комментария.
@rob, но только вы хотите знать "Почему?"
Вы не читали вопрос. Вопрос спрашивает почему, а не как это исправить.
@ Жесты Роба более чем достаточно для мудрого человека
U можно заменить display: inline-block на display: inline-grid. Это решает проблему.
.block {
width: 300px;
margin-left: auto;
margin-right: 15px;
display: inline-grid;
vertical-align: top;
margin-top: 35px;
font-weight: 400;
text-align: left;
}Вопрос в том, почему, а не как это исправить.
Спасибо, похоже, работает. Почему это работает, а не display: inline-block?
В вашем css вы можете добавить:
h2{
margin-bottom:0px;
}
Вопрос в том, почему, а не как это исправить.
проверьте свой <h2> </h2>, проблемы исходят оттуда