Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Информационный Бестселлер на DVD или CD

Статьи для сайтов!!!
Главная Свойства CSS CSS по шагам Поля и отступы в CSS Границы в CSS

Поля и отступы в CSS

Margin Margin-bottom Margin-left Margin-right Margin-top
Padding Padding-bottom Padding-left Padding-right Padding-top


Со структурой блока, надеюсь, Вы уже знакомы. Если нет, то она представлена ниже.

А о блочных и строчных элементах читайте (подробнее здесь...).

Структура блока

Поля и отступы в CSS

И так. Вам уже, наверное, известно, что поля и отступы у блока представлены свойствами padding и margin соответственно. И в предыдущей статье мы уже частично затронули эту тему. На этой странице немного подробнее рассмотрим поля (padding) и отступы (margin).

Свойства margin и padding очень похожи друг на друга, выполняют схожие функции, поэтому их часто путают. Но делать этого конечно же не стоит, так как все-таки поля и отступы это совершенно разные вещи. Впрочем это хорошо видно из рисунка, ведь не случайно он здесь приведен.

Итак. Поля задаются свойством padding. Это внутренние расстояния от границ блока до его содержимого.

Свойство применимо ко всем элементам.

Расстояние задается в единицах длины, принятых в CSS (подробнее здесь...), в %, либо (по умолчанию) определяется браузером автоматически.

Свойство padding является универсальным, так как устанавливает поля от границ элемента до его содержимого для всех его сторон, объединяя таким образом в себе свойства padding-top, padding-right, padding-bottom и padding-left, которые задают ширину полей для каждой из сторон элемента индивидуально.

 

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

Свойство margin также применимо ко всем элементам.

Отступы также задаются в единицах длины, принятых в CSS (подробнее здесь...), в %, либо (по умолчанию) определяется браузером автоматически.

Свойство margin является универсальным, так как задает величину отступов от границ элемента для всех его сторон, объединяя таким образом в себе свойства margin-top, margin-right, margin-bottom и margin-left, которые устанавливают ширину отступов от каждой из границ элемента индивидуально.

И еще: отступы (margin) располагаются за пределами блока, в то время как поля (padding) внутри его, поэтому фон блока или его фоновое изображение распространяются только на поля, а отступы всегда прозрачны, либо имеют фон основного (родительского) блока или фон страницы.

Пример

Фрагмент кода:

<div style="border:#CC0066 solid 2px; background-color:#0099FF;">

<table border="1" style="background-color:#CCFFCC; margin:10px;">
<tr>

<td>
<img src="img/peng_128.gif" width="128" height="128" border="1" style="margin:25px;"> </td>

<td style="
padding:10px">
<p>
Таблица располагается внутри контейнера с красной границей и синим фоном. </p>
<p>
Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей. </p>
<p> В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей. </p>
<p>
Поля правой ячейки составляют 10 пикселей! </p>
</td>

</tr>
</table>


</div>

Результат:


Поля и отступы в CSS

Таблица располагается внутри контейнера с красной границей и синим фоном.

Ширина отступов от границы таблицы до красной границы контейнера составляет 10 пикселей.

В ячейке слева расположено изображение. Отступы от изображения до границ ячейки составляют 25 пикселей.

Поля правой ячейки составляют 10 пикселей!


Блоковая модель в CSS Поля и отступы в CSS Границы в CSS
CSS по шагам
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru