Страницы

Поиск по вопросам

понедельник, 9 декабря 2019 г.

Почему нельзя вложить блок в блочный элемент

#html #css #css3 


Почему нельзя внести div внутрь p? Если внести h1 или же a, то всё работает.



p {
   width: 300px;
   height: 150px;
   border: 1px black solid;
   display: block;
}
p div {
   width: 50%;
   height: 100%;
   background: red;
}


Ответы

Ответ 1


в спецификации указано следующее:


  A p element's end tag may be omitted if the p element is immediately followed by
an address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3,
h4, h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul, element,
or if there is no more content in the parent element and the parent element is not
an a element.





  закрывающий тег элемента p может быть опущен если p элемент расположен сразу за
address, article, aside, blockquote, div, dl, fieldset, footer, form, h1, h2, h3, h4,
h5, h6, header, hgroup, hr, main, nav, ol, p, pre, section, table, or ul элементами,
или если больше нет содержимого в родительском элементе или родительский элемент не a/




console.log(document.querySelectorAll('p').length);
p {
  width: 300px;
  height: 150px;
  border: 1px black solid;
  display: block;
}
p div {
  width: 50%;
  height: 100%;
  background: red;
}


  





  





Ответ 2


Потому что спецификация html5 содержит особые правила автозакрытия некоторых тегов.
В том числе это относится к тегу p. Он закрывается автоматически перед блочными элементами,
таблицами и списками. Это позволяет писать подобный код:



body > * {
  color: blue;
}

body > * > * {
  color: red;
}

p {
  border: 1px dotted green;
}

Some paragraph

The other one

  • And the list





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



~function () {
  var d = document.createElement("div");
  d.textContent = "789";
  document.querySelector("p").appendChild(d);
}();
body > * {
  color: blue;
}

body > * > * {
  color: red;
}

p {
  border: 1px dotted green;
}

123

456





Tag omission (https://developer.mozilla.org/ru/docs/Web/HTML/Element/p)


  The start tag is required. The end tag may be omitted if the 
 element is immediately
followed by an 
, 
,