<b><span id='2.12._<a href="/?q=Форматирование">Форматирование</a>_блоков'>2.12. Форматирование блоков</span></b>
<br />Как вы <a href="/ti-uje-ne-staneshe-pervoj-ya-uje-nikogda-ne-stanu-drugim-sopro.html">уже знаете</a>, любой элемент Web-страницы занимает в окне Web-браузера некоторую прямоугольную область. Эта область имеет как внутренние, так и внешние отступы, а также содержит реальную или воображаемую границу. Тип блочной модели зависит от формата документа. Если тег DOCTYPE> указан, то блочная модель соответствует стандартам консорциума W3C. Реальные размеры элемента вычисляются так:
<br />Реальная ширина = margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right
<br />Реальная высота = margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom
<br />Если тег не указан, то Web-браузер Internet Explorer переходит в режим совместимости (Quirks Mode). В этом режиме padding и border входят в <a href="/width-300px-height-250px.html">состав width и height</a>, а следовательно, реальные размеры будут другие:
<br />Реальная ширина = margin-left + width + margin-right Реальная высота = margin-top + height + margin-bottom
<br />Поэтому при отсутствии тега DOCTYPE> разные Web-браузеры могут по-разному отображать Web-страницу.
<br />
<br />
<br /><span><i><b>Примечание</b></i></span>
<br />Более подробную информацию о типах блочной модели можно получить в Интернете на странице консорциума W3C <u>http</u><u>://</u><u>www</u><u>.</u><u>w</u><u>3.</u><u>org</u><u>/</u><u>TR</u><u>/</u><u>CSS</u><u>2/</u><u>box</u><u>.</u><u>html</u> и на странице <u>http</u><u>://</u><u>www</u><u>.</u><u>quirksmode</u><u>.</u><u>org</u><u>/</u><u>css</u><u>/</u><u>box</u><u>.</u><u>html</u>.
<br /><b><span id='2.12.1._Указание_типа_блока'>2.12.1. Указание типа блока</span></b>
<br />Атрибут display предназначен для указания типа блока. Может принимать следующие значения:
<br /><ul> <li/>
<br />block — блок занимает всю ширину родительского элемента. Значение <a href="/blocks-low-block-inside-block-high-block-outside-hammer-block.html">block по умолчанию имеют теги </a><div> и <p>;
<br /><li/>
<br />inline — блок занимает только необходимое для отображения содержимого пространство. Значение inline по умолчанию имеют теги ,
<br /></ul>
<br /><span><b> и др.;
<br /><ul> <li/>
<br />inline-block — аналогично inline, но дополнительно можно задать размеры и другое форматирование, применяемое для блочного элемента. Результат аналогичен встраиванию тега <img> в <a href="/varianti-zadanij-prakticheskoj-raboti-5.html">строку</a>;
<br /><li/>
<br />none — содержимое блока не отображается.
<br /></ul>
<br />Различные варианты использования атрибута display приведены в листинге 2.8.
<br />
<p>! Листинг 2.8. Атрибут <b>display</b></p>
<br /><sup><span lang="en-us">M</sup><u>http://www.w3.org/TR/html4/strict.dtd</u><sup><u>M</u></sup>>
<br /><html> <head>
<br />^^^>Атрибут display
