Блог

Спасибо, что прочитали это

У меня странная проблема с макетами. Я использовал сброс CSS Мейера. У меня есть div, содержащий 3 раздела следующим образом. Я еще не добавил никакого контента.

 <div id="container">
  <div class="gallery"></div>
  <div class="gallery"></div>
  <div class="gallery"></div>
</div>
  

Применяются следующие стили

 #container{
  width: 954px;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
}
  

Итак, на мой взгляд, каждая галерея имеет ширину 24px 270px 24px = 318px. Таким образом, общая ширина 3 разделов галереи равна 318px * 3 = 954px.

Однако divs будут отображаться только в одной строке, когда я увеличу ширину #container до 960 пикселей.

Откуда берутся 6 загадочных пикселей? Я дважды проверил, что все остальные значения границ, отступов и отступов равны 0. Я даже установил outline равным 0px, хотя это не должно иметь эффекта в любом случае.

Для внутренних разделов установлено значение display: inline-block; . Это означает, что любой пробел между ними приведет к добавлению одного пробела между ними в макете.

Вариант 1

Хотя это и неприятное решение, вы не увидите дополнительного пространства, если сделаете это.

 <div id="container">
  <div class="gallery"></div><!--
  --><div class="gallery"></div><!--
  --><div class="gallery"></div>
</div>
  

Вариант 2

Другим решением, которое неприятно по разным причинам, является установка font-size: 0; на #container . Если вы хотите, чтобы внутри был текст, вам нужно будет установить для font-size элементов внутри значение в пикселях.

 #container{
  width: 954px;
  font-size: 0;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
}
  

Вариант 3

Однако самым чистым решением, вероятно, было бы переместить внутренние разделы влево и очистить оболочку.

 #container{
  width: 954px;
}

#container:after {
    content: "";
    display: table;
    clear: both;
}

.gallery {
  display: inline-block;
  width: 270px;
  margin: 24px;
  float: left;
}
  

Вы пытались «закрыть» пробел?