Будут ли пропущены пробелы или переносы между двумя блочными элементами в HTML?

Question

Интуитивно понятно, что пробел или перенос будут игнорироваться между двумя тегами блока, хотя мы кодируем его пробелом.Как показано на рисунке:

<div>
  foo
</div>
<!-- no matter how much space or wrap when we code -->
<div>
  foo
</div>

Как мы знаем, пробелы будут сжаты как один пробел между двумя встроенными элементами.Так какое правило в элементе блока?Это действительно игнорируется браузером?

Answer 1

Если мы ссылаемся на спецификацию :

В контексте форматирования блока блоки располагаются один за другим вертикально, начиная с верхней части содержащего блока, Вертикальное расстояние между двумя соседними ячейками определяется свойствами 'margin' .Вертикальные поля между соседними блоками уровня блока в контексте форматирования блока сворачиваются.

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

Давайте рассмотрим этот пример:

.b {
 border:1px solid;
 height:50px;
}

<div>
  <div class="b"></div>


some text


<div class="b"></div>
</div>

Между двумя уровнями блоков у нас есть анонимный блок, образованный текстом, как описано в спецификации.Мы закончим 3 блоком: два div + созданный анонимный, который содержит текст.

Этого не произойдет, если у вас есть только складной пробел (то есть U+0020) ¹ .Таким образом, между двумя блоками в вашем примере не создан ни один анонимный блок.

Ниже приведен пример, где я использовал неразборный пробел (символ нулевой ширины U+200B), где вы увидите пробел между элементами блока, потому чтосоздается анонимный блок, содержащий этот невидимый характер.Опять третий блок здесь в игре.Технически пространство, которое мы видим, - это тот невидимый блок, а между невидимым блоком и двумя другими нет пробела.

.b {
 border:1px solid;
 height:50px;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>
  ​
  <div class="b"></div>
</div>

Вы можете четко заметить, как увеличение font-size увеличит расстояние, потому что мы увеличиваем шрифт невидимого символа внутри нашего анонимного блока, который становится больше, нажимаянижний.

Ниже приведен другой способ проиллюстрировать, где красный div заменяет наш анонимный блок, где я поместил невидимый символ:

.b {
 border:1px solid;
 height:50px;
}
.anonymous {
 background:red;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>
  <div class="anonymous">​</div>
  <div class="b"></div>
</div>

По сравнению со сложными пробелами анонимный блок не создается и ничто не разделяет наши блочные элементы.Третий блок не будет создан, и только поле может изменить интервал:

.b {
 border:1px solid;
 height:50px;
}

body {
  animation:change 2s linear infinite;
}
@keyframes change {
  from {
    font-size:16px;
  }
  to {
    font-size:36px;
  }
}

<div>
  <div class="b"></div>

  <div class="b"></div>
</div>

---

Поведение по умолчанию также может быть изменено, если мы настроим свойство white-space, управляющее тем, как пробелы должны или не должны разрушаться.

.b {
 border:1px solid;
 height:50px;
}

div {
  white-space:pre;
}

<div>
  <div class="b"></div>
  <div class="b"></div>
  
  
  
  <div class="b"></div>
</div>

¹ Подробнее об алгоритме white-space можно узнать по следующей ссылке: https://www.w3.org/TR/CSS2/text.html#white-space-prop

Ниже соответствующей части, относящейся к исходному примеру, где удаляются все разделенные интервалы:

По мере выкладывания каждой строки,

1. Если пробел (U + 0020) в начале строки имеет «пробел», установленный на «обычный» , «nowrap» или «pre-line», этоудалено .
2. Все вкладки (U + 0009) отображаются в виде горизонтального сдвига, который выравнивает начальный край следующего глифа с помощью следующей остановки табуляции.Остановка табуляции происходит в точках, кратных 8-кратной ширине пробела (U + 0020), отображаемого в шрифте блока от начального края содержимого блока.
3. Если пробел (U + 0020) в конце строки имеет «пробел», установленный на «обычный» , «nowrap» или «предварительная строка»', он также удаляется .
4. Если для пробелов (U + 0020) или табуляции (U + 0009) в конце строки для "пробела" установлено значение "pre-оберните », UA могут визуально свернуть их.

Answer 2

Любые пробелы между элементами уровня блока игнорируются, поэтому вы можете расположить разметку так, чтобы ее было легко читать.Если бы это было не так, весь ваш документ мог бы быть в две или три строки.

Вы можете добавить разрывы строк с помощью тега <br /> или добавить пробел с полем или отступом.Помните, HTML просто определяет содержимое документа: ему все равно, как он отображается.Для этого и нужен CSS.