1.5. Поля та відступи

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>

<Н1>Заголовок</Н1> <Р>Абзац тексту, на який, за допомогою завдання від'ємних значень для полів, спробуємо "насунути" заголовок.</Р>

Заголовок

Абзац тексту, на який, за допомогою завдання від'ємних значень для полів, спробуємо "насунути" заголовок

H1 { margin-bottom: -1em; }

Заголовок

Абзац тексту, на який, за допомогою завдання від'ємних значень для полів, спробуємо "насунути" заголовок

Властивості CSS для керування характеристиками блоків

Властивість

Опис

Приклад

margin-top margin-right margin-bottom margin-left margin

Чотири індивідуальних властивості, які встановлюють величину верхнього, правого, нижнього і лівого полів, і стенографічна властивість задання всіх полів одночасно (від 1 до 4 значень). Допускається задавання значень в одиницях довжини, відсотках від ширини батьківського блоку. Допустимі від'ємні значення.

TD {margin: 10 рх} H1 {margin-bottom: -1em}

padding-top padding-right padding-bottom padding-left padding

отири індивідуальних властивості, які встановлюють величину верхнього, правого, нижнього, лівого відступів, і стенографічна властивість для задання всіх відступів одночасно (від 1 до 4 значень). Допускається задання значень в одиницях довжини, відсотках від ширини батьківського блоку. Від'ємні значення не допускаються.

TD {padding: 10px} P {padding: 0.5em 1em} H1 {padding-bottom: 12pt}

border-top-width border-right-width border-bottom-width border-left-width border-width

Чотири індивідуальних властивості, які встановлюють ширину верхнього, правого, нижнього і лівого сегментів границь блоку, і стенографічна властивість для завдання товщини всіх сегментів границь одночасно (від 1 до 4 значень). Допускається задавання значень в одиницях довжини і за допомогою ключових слів: thin, medium, thick. Від'ємні значення і значення у відсотках не допускаються.

Р {border-width: 1px Зрх } Р {border-top-width: lpx; border-right-width: medium; border-bottom-width lpx; border-left-width: thin;}

border-top-color border-right-color border-bottom-color border-left-color border-color

Чотири індивідуальних властивості, які встановлюють колір верхнього, правого, нижнього і лівого сегментів границь блоку, і стенографічна властивість для завдання кольору всіх сегментів границь одночасно (від 1 до 4 значень). В якості значень використовується будь-який з трьох способів завдання кольору.

P {border-color: red} P.green {border-color: rgb (0,255,0)} H1 {border-color: #336}

border-top-style border-right-style border-bottom-style border-left-style border-style

Чотири індивідуальних властивості, які встановлюють тип ліній верхнього, правого, нижнього і лівого сегментів границь блоку, і стенографічна властивість для завдання типу ліній всіх сегментів границь одночасно (від 1 до 4 значень). В якості значень використовуються ключові слова: none | dotted | dashed | solid | double | groove | ridge | inset | outset

P {border-style: solid}

border-top border-right border-bottom border-left border

Чотири індивідуальних стенографічних властивості, які встановлюють стиль верхнього, правого, нижнього і лівого сегментів границь блоку окремо (значення властивостей йдуть у наступному порядку: border-width, border-style, border-color), і загальна стенографічна властивість для визначення стилю всіх сегментів границь блоку одночасно. В останньому випадку всі сегменти границь будуть однаковими - задання різних стилів для різних сегментів границі здійснюється через індивідуальні властивості цієї групи

P {border: lpx solid red} P { border-top: solid red;       border-right: solid red;          border-bottom: solid red;       border-left: solid red }