4

Делаю сайт

Между двумя блоками div есть пространство буквально в 1px, и снизу блока то же самое.

Все margin'ы я обнулил, откуда они взялись и как их убрать, чтобы блоки вплотную стояли?

Знаю, что можно сделать с помощью float, но хотелось бы оставить display: inline-block.

* {
  margin: 0;
}

body {
  background-color: #f3f3f3;
}

.header {
  border: 1px solid red;
}

.header__left {
  background-image: url(../images/1.png);
  width: 65%;
  height: 715px;
  display: inline-block;
}

.header__right {
  background-image: url(../images/2.png);
  width: 34%;
  height: 715px;
  display: inline-block;
}
<div class="header">
  <div class="header__left"></div>
  <div class="header__right"></div>
</div>
<div class="mider">
  <div class="mider__left"></div>
  <div class="mider__right">
    <div class="mider__right-top"></div>
    <div class="mider__right-bot"></div>
  </div>
</div>
<div class="footer">
  <div class="footer__left"></div>
  <div class="footer__right"></div>
</div>

3

2 ответа 2

3

Между элементами появляется пространство, вызванное тем, при написание вы использовали "новую строку", а браузер из этого уже сделал "пробел":

введите сюда описание изображения

Решений несколько, вот те которые могу предложить:

Выставить родителю font-size: 0

.header {
  border: 1px solid red;
  /* ----- */
  font-size: 0;
}

.header__left {
  background: red;
  width: 65%;
  height: 90vh;
  display: inline-block;
}

.header__right {
  background: blue;
  width: 34%;
  height: 90vh;
  display: inline-block;
}
<div class="header">
  <div class="header__left"></div>
  <div class="header__right"></div>
</div>


Использовать float: left;

.header {
  border: 1px solid red;
}

/* fix */
.header::after {
  content: '';
  display: block;
  clear: both;
}

.header__left {
  background: red;
  width: 65%;
  height: 90vh;
  display: inline-block;
  /* ----- */
  float: left;
}

.header__right {
  background: blue;
  width: 34%;
  height: 90vh;
  display: inline-block;
  /* ----- */
  float: left;
}
<div class="header">
  <div class="header__left"></div>
  <div class="header__right"></div>
</div>


Использовать комментарий

.header {
  border: 1px solid red;
}

.header__left {
  background: red;
  width: 65%;
  height: 90vh;
  display: inline-block;
}

.header__right {
  background: blue;
  width: 34%;
  height: 90vh;
  display: inline-block;
}
<div class="header">
  <div class="header__left"></div><!--
  --><div class="header__right"></div>
</div>


Использовать "новые" технологии Flexbox или Grid Layout

.header {
  border: 1px solid red;
  /* ---- */
  display: flex;
}

.header__left {
  background: red;
  width: 65%;
  height: 90vh;
  display: inline-block;
}

.header__right {
  background: blue;
  width: 34%;
  height: 90vh;
  display: inline-block;
}
<div class="header">
  <div class="header__left"></div>
  <div class="header__right"></div>
</div>

3
  • Может кому-то не понравился float-left, который по идее не должен использоваться для позиционирования) Еще, можно физически перенести закрывающую > на следующую строку, начав следующий блок так: ><div 4 сен 2020 в 14:53
  • Раньше использовался и всё было "хорошо".. А вот насчёт последнего варианта не знал, интересно.
    – De.Minov
    4 сен 2020 в 16:58
  • Добавлю здесь еще 1 мысль - я слышал, что заминусованные вопросы автоудаляются если нету ответов с рейтингом больше 0. Т.е. кто-то мог выписать ответам по минусу только для того чтобы вопрос побыстрее автоматом удалился (и вам этот -1 вернется при этом).
    – Kromster
    5 сен 2020 в 6:39
3

Такое может происходить из за пустого места в шаблоне HTML, которое обычно убирается на этапе минификации.

Если она не планируется, то понадобиться самостоятельно убрать пробелы:

// как сейчас
<div class="header">
  <div class="header__left"></div>
  <div class="header__right"></div>
</div>

// как следует поменять
<div class="header"><div class="header__left"></div><div class="header__right"></div></div>

// или так (не рекомендую, просто для информации)
<div class="header"
  ><div class="header__left"></div
  ><div class="header__right"></div
></div>

// или так (еще одно извращение)
<div class="header"><!--
  --><div class="header__left"></div><!--
  --><div class="header__right"></div><!--
--></div>

Результат после:

введите сюда описание изображения

Рабочий пример:

.header {
  display: inline-block;
  height: 45px;
  border: 1px solid red;
}

.header__left, .header__right {
  display: inline-block;
  height: 45px;
}

.header__left {
  width: 165px;
  background-color: blue;  
}

.header__right {
  width: 135px;
  background-color: green;  
}
<div class="header"><div class="header__left"></div><div class="header__right"></div></div>

В случае, когда мы имеем дело с определенными inline-элементами может потребоваться дополнительное обнуление свойств font-size и line-height, которые могут провоцировать нежелательные отступы.

Отдельно стоит отметить что у div-элементов margin и padding по дефолту и так равны нулю, т.е специально обнулять их не требуеться.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.