Мобильная версияЯ пытался понять, как работают display: inline и display: inline-block, и просто экспериментировал со случайными макетами, чтобы увидеть, как что-то изменилось/на что повлияло, с одним родительским элементом/контейнером, заполненным только тремя дочерними элементами, следующим образом, как будет вставлено ниже в snippet.
Наблюдаемое поведение заключается в наличии некоторого пробела между двумя элементами строкового блока, как и предполагалось, из-за разрывов строк внутри самого HTML, и, как я заметил, независимо от того, каковы эти разрывы строк, пространство между элементами, похоже, не увеличивается, что, возможно, называется «схлопыванием», но я не совсем уверен.
Кроме того, если мы наведем курсор на середину html (при использовании Devtools), мы сможем увидеть элемент где-то ближе к нижней части окружающих элементов, потому что средний элемент должен совпадать с нижним полем этих двух элементов, а размеры среднего элемента составляют 0x17px, что означает, что элемент не имеет ширины и, следовательно, не может иметь цвета фона.
Здесь (в примере ниже) это работает ясным и понятным для меня способом, поскольку элемент не имеет содержимого внутри из него и, следовательно, не имеет ширины и, следовательно, не имеет цвета фона. Свойства, которые я наблюдал внутри инструментов разработчика, пытаясь отследить, откуда что-то поступало, были innerHTML, innerText, outerText и textContent, хотя я думаю, что мог пропустить некоторые другие важные свойства. Однако в приведенном ниже примере все перечисленные являются "".
Код: Выделить всё
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Код: Выделить всё
В следующем примере, где я добавляю лишь незначительное изменение, разрыв строки внутри среднего элемента, свойства начинают меняться (вполне ожидаемо).
Свойство innerHTML теперь показывает внутри новую строку, innerText остается пустым, outerText также остается пустым, а textContent теперь содержит вновь вставленный разрыв строки.
Тем не менее, когда на элемент наведен курсор, его размер по-прежнему равен 0x17, а фон не отображается, что, я думаю, и следовало ожидать. В инструменте токенизатора DOM средний элемент div окружен текстовым узлом с обеих сторон, что объясняется разрывами строк после первого тега div и после самого среднего элемента div.
Приведенный ниже фрагмент не показывает визуальных изменений по сравнению с предыдущим, но я думаю, что важно проследить, как развивались события, которые позже перейдут к тому конкретному элементу, который вызвал первоначальный вопрос.
Код: Выделить всё
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Код: Выделить всё
Однако следующий пример, с добавлением лишь небольшой настройки в HTML, покажет нечто, что я не могу объяснить и что ускользает от меня, но что, возможно, является чем-то очень очевидным для вас, сир. Закрывающий тег первого div теперь размещается вместе с открывающим тегом второго div, вместо того, чтобы оставаться на своей начальной строке рядом с собственным открывающим тегом.
Упомянутый мной инструмент токенизатора DOM теперь показывает эти два div (первый и второй) как не имеющие текстового узла между собой, чего и следовало ожидать, а средний div теперь показывает цвет фона и увеличил размер - теперь он составляет 4x17 пикселей, увеличив ширину... но откуда и почему - я не знаю.
При дальнейшем наблюдении в devtools мы обнаруживаем ранее обсуждавшиеся свойства в следующем состоянии: innerHTML имеет в качестве значения разрыв строки, внутренний текст теперь превратился в " " из ", внешний текст теперь также превратился в " " из "", причем textContent, как и прежде, равен разрыву строки. Итак, после сдвинутого закрывающего тега произошли изменения, в результате которых средний элемент стал иметь ширину и цвет фона.
Итак, я обнаружил три условия, при которых цвет фона срабатывает для среднего элемента, а именно:
- закрывающий тег первого элемента должен находиться на той же строке, что и открывающий тег среднего элемента (это звучит очень странно, и я думаю, что должна быть какая-то другая причина для этого). что)
- средний элемент должен иметь этот разрыв строки внутри себя
- третий элемент должен существовать
Как уже было сказано, приведенный ниже пример демонстрирует поведение, описанное выше, со всеми выполненными условиями.
Код: Выделить всё
*{
margin: 0px;
}
.containerdiv{
width: 100vw;
height: 100vh;
background-color: burlywood;
}
.containerdiv div{
width: 100px;
height: 100px;
background-color: aqua;
}Код: Выделить всё
Итак, мне не удалось соединить эти вещи, чтобы сформировать понятную картину, каким-то образом, если третий элемент удалить, средний элемент перестает иметь ширину и те реквизиты, которые раньше были " ", становятся "", есть ли у вас какие-либо идеи, где искать или какой закон/правило здесь играет роль?
Подробнее здесь: https://stackoverflow.com/questions/797 ... ed-on-unce
