1. Що якщо значення не вказані?
2. Ширина за замовчуванням для блокових елементів.
3. Елементи з абсолютним позиціонуванням
4. обтічні елементи
5. Рядкові елементи теж прямокутники.
6. Особливість обробки в IE6
7. Хочу побачити все на власні очі

Box-модель в CSS - це ключовий момент. Кожен елемент на сторінці визначається прямокутником, що покриває цей елемент. Розуміння того, як це працює - основа успішної верстки. Давайте розглянемо як елемент впливає на елементи, що лежать навколо нього, а також обговоримо питання відображення різними браузерами.

В першу чергу, розглянемо як точно розраховується розмір елемента. Погляньте на діаграму:

Якщо ви користуєтеся firebug-му, то ви вже використовували схожу діаграму:

Зверніть увагу, що в обох прикладах зовнішні відступи (margin) замальовані білим кольором. Зовнішні відступи унікальні тим, що вони не впливають на розмір самого елемента, але зате впливають на сусідні, і тим самим становлять важливу частину box-моделі.

Розміри самого елемента розраховуються наступним чином:

width + padding-left + padding-right + border-left + border-right Height height + padding-top + padding-bottom + border-top + border-bottom

Що якщо значення не вказані?

Якщо ви використовуєте CSS reset , То значення для внутрішніх відступів і кордонів будуть нульовими, інакше вони будуть рівні значень за замовчуванням для використовуваного браузера (яке не обов'язково є нульовим).

Якщо ширина елемента не вказана (а елемент є блоковим), то все трохи простіше. Давайте почнемо з цього, а потім перейдемо до інших питань, які необхідно знати про box-моделі.

Ширина за замовчуванням для блокових елементів.

У разі якщо ви не оголосили ширину, а елемент має статичне (static) або відносне (relative) позиціонування, то ширина буде 100%, а внутрішні відступи і межі будуть вважатися частиною цієї ширини. Однак якщо ви явно вкажіть ширину дорівнює 100%, то внутрішні відступи будуть додаватися до основної ширині.

Сенс в тому, що в цьому випадку ширина елемента насправді не 100%, а то що залишилося після обробки внутрішніх відступів і кордонів. Це особливо корисно знати, оскільки існує безліч випадків коли зручно або встановити ширину, або не встановлювати її.

Найбільш неприємним моментом я знаходжу те, що для елемента textarea, якому дуже часто необхідно встановити ширину, необхідно вказувати атрибут col. Таким чином у нас не вийде зробити його ширину рівною 100%. У статичної верстці ми, звичайно можемо підігнати навколишні елементи, але що робити при плаваючою розмітці?

Елементи з абсолютним позиціонуванням

Елементи з абсолютним позиціонуванням, для яких ширина не встановлена, поводяться злегка дивно. Їх ширина встановлюється такий, щоб тільки вистачило покрити контент.

Так триває до тих пір, поки ширина елемента не стане рівною ширині батька (найближчого з відносним позиціонуванням, або вікно браузера), а потім вміст почне переноситися на інший рядок. Це виглядає природно для елементів, які збільшуються по вертикалі, для того щоб вмістити контент. Але досить дивно коли це поведінка відбувається горизонтально. Ця дивина, насправді є виправданою, оскільки є багато примх в тому, як різні браузери справляються з цим, не кажучи вже про те, що текст рендерится по різному в різних браузерах.

обтічні елементи

Таке ж точно ситуація може виникнути у елементів з встановленим властивістю float. Елементу встановлюється ширина, мінімально необхідна для того щоб вмістити контент, розширюється до ширини батьківського елементу (хоча відносне позиціонування вже необов'язково). Через тендітної природи цих "бесшірінних" елементів, вони практично не використовуються в критично важливих сценаріях. Якщо ви, наприклад, зробили сайдбар, вказавши для div який-небудь float, і не встановили ширину, то кожен елемент всередині нього відповідальний за розмір цього сайдбара.

Рядкові елементи теж прямокутники.

Досить просто уявити блоковий елемент прямокутником, однак малі (inline) елементи теж є прямокутниками. Досить уявити їх дуже-дуже довгими і худими. Такими, що вони переносяться на один рядок. Вони теж можуть мати зовнішні і внутрішні відступи і межі, як і будь-який інший елемент на сторінці.

Перенесення по рядках може вводити в оману. Лівий зовнішній відступ, як показано вище, працює так, як ви собі уявляли, але тільки в першому рядку, там, де починається прямокутник. Внутрішні відступи застосували зверху і знизу тексту, як це повинно бути, а в місцях перенесення тексту вони ігноруються, і наступний рядок починається з позиції, зазначеної властивістю line-height.

Особливість обробки в IE6

В Internet Explorer 6.0, при невстановленому doctype, є одна істотна різниця при розрахунку розмірів елементів. Якщо у всіх браузерах під шириною мається на увазі ширина контенту, то в IE6 - це ширина разом з внутрішніми відступами і кордонами. Точно також і з висотою.

Хочу побачити все на власні очі

Хочете подивитися як формується ваша сторінка? Спробуйте дописати в ваш стильовий файл наступне:

* {Border: 1px solid red! Important; }