Властивості border-top, border-right, border-bottom та border-left.

Представляють собою узагальнення для задання властивостей border-width, border-style та border-color відповідних сегментів границі блоку, наприклад:

Р { border-top: 1px solid red; border-right: 2px solid red; border-bottom: 1px solid red; border-left: 2px solid red }

Границі навколо абзацу будуть червоними, проведеними суцільною лінією. Зверху і знизу товщина границь 1 піксель, праворуч і ліворуч – 2 пікселя.

Властивість border

Ця властивість використовується для одночасного задання параметрів всіх чотирьох сегментів границі: ширини, кольору і стилю. На відміну від властивостей margin і padding, властивість border не може встановлювати різні значення для окремих сегментів границі. Щоб це зробити, необхідно використовувати інші властивості границі, а саме: border-top, border-right, border-bottom та border-left.

P { border: 1px solid red }

Границя навколо цього абзацу буде однаковою з усіх чотирьох сторін: суцільна лінія червоного кольору товщиною 1 піксель.

 Відступи дозволяють відокремити основний вміст блоку від границі таким чином, щоб границя розташовувалась на деякій відстані від вмісту.

Властивості padding-top, padding-right, padding-bottom, padding-left.

Індивідуальні властивості, що дозволяють задати розміри відступів для кожної сторони окремо.

• padding-top – ширина верхнього поля.

• padding-right –- ширина правого поля.

• padding-bottom – ширина нижнього поля.

• padding-left – ширина лівого поля.

Значення властивостей можуть задаватися в довільних одиницях довжини або у відсотках. Відсотки обчислюються щодо ширини згенерованого елементом блоку відступів, в якості значень не допускається задання негативних величин, на відміну від полів, де негативні значення припустимі.

Властивість padding

Властивість використовується для короткого запису значень властивостей padding-top, padding-right, padding-bottom та padding-left. Властивість padding може мати одне, два, три або чотири значення. Значення присвоюються також, як для полів і границь. Розглянемо такий код:

Р { background-color:#FFC; border:1px solid blue; padding:0.5em 1em; }

1.4. Відступи

Ha прикладі цього абзацу розглянемо, як працюють відступи. У стилі для елемента P зазначено, що фон його блоку світло-жовтий, навколо блоку є синя границя товщиною 1 піксель, розміри відступів по 0,5 em зверху і знизу та по 1 em ліворуч та праворуч.

Перший абзац оформлюється саме таким стилем, для другого абзацу значення властивості padding перевизначається і встановлюється рівним нулю. У результаті, згідно з правилами каскадування, відступи у другого абзацу повинні бути відсутніми. У вікні браузера ми побачимо картину, як показано на малюнку:

У стилі для елемента P зазначено, що фон його блоку світло-жовтий, навколо блоку є синя границя товщиною 1 піксель, розміри відступів по 0,5 em зверху і знизу і по 1 em зліва і справа

У стилі для елемента P зазначено, що фон його блоку світло-жовтий, навколо блоку є синя границя товщиною 1 піксель, розміри відступів по 0 em зверху, знизу, зліва і справа

Як видно, перший абзац дійсно має відступи із заданими розмірами. А ось у другого абзацу їх немає, і текст щільно прилягає до кордону блоку – особливо чітко це видно по лівої границі і візуально все це виглядає не дуже добре. Тому варіант з відступами більш привабливий, тим більше що розмір відступів можна регулювати і для кожної сторони задавати їх окремо.

Різні відступи для окремих сторін блоку можна задавати за допомогою іменних властивостей:

Р { padding-top: 0.5em; padding-right: 10рх; padding-bottom: 3%; padding-left: 1em; }

Порядок задання значень такий, як для полів і границь: починаючи з верхнього відступу, далі за годинниковою стрілкою правий і нижній, останнім задається лівий відступ. Таким чином, два наведених вище правила будуть еквівалентні за змістом, але друге істотно коротше за записом.