«Единственный способ творить великие дела – это любить то, что ты делаешь»
CSS
site.komp36.ru Создание сайтов. Твой сайт фотографа Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Продающий лендинг «Установка и продажа окон» Установка и продажа окон, установка дверей, перегородок. Одностраничный продающий сайт. Заявки прямо с сайта
site.komp36.ru Универсальный лендинг. Любая тема сайта - 4900 руб. Лендинг адаптируется под любую тему: ремонт, отделка, продажа окон, дверей, лестниц, мебели и многое другое
site.komp36.ru Создание сайтов. Сайт сервисного центра. Сайт компании. Новости и отзывы. Несколько прайс-листов – под каждый отдельная страница. Возможность размещения статей

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

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

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

Поля и отступы в 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>

Результат

site.komp36.ruТвой сайт фотографа. Создание сайтов Что есть на сайте? Несколько фото галерей: свадебная, постановочная съемка, love story, детские фото. Договор на фотосъемку, прайс-лист.
site.komp36.ru Акция Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Акция Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

CSS по шагам
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта

Все cвойства CSS
Тематические публикации
site.komp36.ru Как начать свое дело? Свой сайт «Укладка плитки» 9 000 руб. Лендинг адаптируется под любой вид отделочных работ, продажу товаров или услуг. Сайт поможет найти новых клиентов
site.komp36.ru Продающий лендинг «Установка и продажа окон» 9 000 руб. Одностраничный продающий сайт. Установка и продажа окон, установка дверей, перегородок. Заявки прямо с сайта