seodon.ru | Учебник CSS - Ответ по уроку Универсальный селектор

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Результат - Универсальный селектор</title>
  <style type="text/css">
   blockquote {
    margin: 1em 0;
   }
   p {
    margin: 1em 50px;
   }
   span {
    display: block;
   }
  </style>
 </head>
 <body>
  <blockquote><div>Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E.</div></blockquote>
  <blockquote><div>Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E. Текст внутри B-L-O-C-K-Q-U-O-T-E.</div></blockquote>
  <p>Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P. Текст внутри P.</p>
  <div>
   <span>Текст внутри SPAN-1.</span> <span>Текст внутри SPAN-2.</span> <span>Текст внутри SPAN-3.</span>
  </div>
 </body>
</html>

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

Теперь о той самой ловушке. Запомните! Как бы вы ни изменяли HTML-элемент при помощи стилей, вы все равно должны соблюдать синтаксис самого HTML. То есть в нашем случае хоть <BLOCKQUOTE> и похож на параграф, но он все равно не может содержать обычные встроенные элементы и текст. Именно поэтому дополнительно был использован <DIV>.

То же самое касается и <SPAN>. Он хоть и стал визуально блочным, но все равно не может находиться непосредственно внутри <BODY>.

Так что, если вы допустили указанные ошибки, то постарайтесь впредь их избегать. Вот, в общем-то, и все. :)

Вернуться в урок

→ Перейти к следующему уроку