... главная страницаКарта сайтаКонтакты

Главная
Синтаксис CSS
Свойства CSS
Форматирование блоков
Списки
Пример применения стилей
Оптимизация стилей
Оформление текстов
Использование блоков
Позиционирование
Слои в CSS
Готовые решения
Дополнительные возможности CSS
Программа TopStyle
Таблица цветов

 

Все свойства CSS

 
Яндекс.Метрика
 
 

Форматирование блоков. Отступы или поля? (стр. 1)

 

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?


В этом разделе мы попробуем разобраться, в каких случаях следует пользоваться отступами, а в каких - полями. Перечислим несколько принципиальных отличий полей и отступов. Рассмотрим первое отличие. Отступы располагаются внутри границ блока, поля - за их пределами. Для иллюстрации рассмотрим два класса:

p_mar { background-color: #FFC; border:1px solid blue; margin: 2em }
p_pad { background-color: #FFC; border:1px solid blue; padding: 2em }

Оформим два различных абзаца при помощи этих классов:

<Р class="p_mar"> Для этого абзаца используется класс "p__mar", для него заданы поля размером 2em.</P>
<Р class="p_pad"> Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.</P>

В результате в окне браузера мы увидим эти абзацы так, как показано на рисунке:



Для этого абзаца используется класс "p_mar", для него заданы поля размером 2em.

Для этого абзаца используется класс "p_pad", для него заданы отступы размером 2em.

Как вы видите, в первом случае, когда используются поля, "пустые" места расположены за пределами границы блока, внутри блока отступов нет. Во втором случае, когда используются отступы, "пустоты" расположены внутри границы блока.

На отступы распространяется фон блока и фоновое изображение, а на поля нет. Поля всегда прозрачны, сквозь них просвечивает фон родительского элемента.

 

Страница: - 1 - | - 2 -

 

Блоки в HTML и CSS ||  Поля ||  Границы ||  Отступы ||  Отступы или поля?

 

Наверх страницы

 

Уроки CSS © 2007 - 2018 г. Все права защищены