...

Изучив материалы, представленные на сайте CSS-Style.SU, Вы уверенно будете пользоваться всеми возможностями технологий каскадных таблиц стилей Cascading Style Shett

Поиск по сайту:

	Главная

	Синтаксис CSS

	Свойства CSS

	Форматирование блоков
	Списки

	Пример применения стилей

	Оптимизация стилей

	Оформление текстов

	Использование блоков

	Позиционирование

	Слои в CSS

	Готовые решения

	Дополнительные возможности CSS


	Программа TopStyle

	Таблица цветов

Все свойства CSS !important after background background-attachment background-color background-image background-position background-repeat before border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom caption-side clear clip color content cursor display float font font-family font-size font-style font-variant font-weight height left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-width min-width opacity overflow padding padding-bottom padding-left padding-right padding-top position quotes right table-layout text-align text-decoration text-indent text-transform top vertical-align visibility white-space width word-spacing z-index



статьи 1 2 3 4

Форматирование блоков. Отступы или поля? (стр. 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 - 2012 г. Все права защищены