Геометрія елемента

У HTML та CSS, геометрія елементів визначає їхні розміри та розташування на веб-сторінці. Це можна контролювати за допомогою різних властивостей та методів. уелемента є чотири сторони: верх (top), право (right), низ (bottom) і ліво (left). У випадках вказання щбірних властивостей їх задають саме в такому порядку.

Padding (Внутрішні відступи)

padding - властивість встановлює внутрішні відступи елемента (відстань між контентом та рамкою). Є різні формати задання відступів з різних сторін.

/*-- Однакові внутрішні відступи з усіх сторін по 10px --*/
padding: 10px;

/*-- Внутрішні відступи згори і знизу по 5px --*/
/*-- Внутрішні відступи зліва і справа по 10px --*/
padding: 5px 10px;

/*-- Внутрішній відступ згори 20px --*/
/*-- Внутрішні відступи зліва і справа по 10px --*/
/*-- Внутрішній відступ знизу 5px --*/
padding: 20px 10px 5px;

/*-- Внутрішній відступ згори 20px --*/
/*-- Внутрішній відступ справа 15px --*/
/*-- Внутрішній відступ знизу 10px --*/
/*-- Внутрішній відступ зліва 5px --*/
padding: 20px 15px 10px 5px;

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

padding-top: 20px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 5px;

Margin (Зовнішні відступи)

margin - властивість встановлює зовнішні відступи елемента (відстань між зовнішнім контуром елемента та його навколишнім середовищем).

Задають зовнішні відступи за таким само принципом, як і внутрішні відступи.

/*-- Однакові зовнішні відступи з усіх сторін по 10px --*/
margin: 10px;

/*-- Зовнішні відступи згори і знизу по 5px --*/
/*-- Зовнішні відступи зліва і справа по 10px --*/
margin: 5px 10px;

/*-- Зовнішній відступ згори 20px --*/
/*-- Зовнішні відступи зліва і справа по 10px --*/
/*-- Зовнішній відступ знизу 5px --*/
margin: 20px 10px 5px;

/*-- Зовнішній відступ згори 20px --*/
/*-- Зовнішній відступ справа 15px --*/
/*-- Зовнішній відступ знизу 10px --*/
/*-- Зовнішній відступ зліва 5px --*/
margin: 20px 15px 10px 5px;

Можна властивість зовнішнього відступу вказувати для кожної сторони окремо.

margin-top: 20px;
margin-right: 15px;
margin-bottom: 10px;
margin-left: 5px;

Використовувати Margin чи Padding?

Вибір між Margin і Padding залежить від того, який ефект ви хочете досягти.

Використання Margin:

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

Використання Padding:

• Padding встановлює внутрішні відступи елемента, тобто відстань між контентом елемента та його рамкою. Використовується для створення відстані між контентом елемента та його внутрішніми краями.

Розгляньте наступні ситуації для легкості вибору:

1. Якщо вам потрібно створити відстань між елементами:

   • Використовуйте margin. Наприклад, якщо ви хочете, щоб між двома блоками була відстань, встановіть margin для одного з них.

2. Якщо вам потрібно створити відстань між контентом елемента та його рамкою:

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

3. Коли обидва:

   • Інколи можна використовувати як margin, так і padding в одному елементі, залежно від потреб дизайну.

Схлопування вертикальних відступів

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

Тобто навіть попри те, що відступи 10px і 30px - вони не додаються, а одирається найбільший з них.

Покажемо на коді, як це відбувається:

<div class="box top"></div>
<div class="box bottom"></div>

.box {
  width: 50px;
  height: 50px;
}

.top {
  margin-bottom: 10px;
  background-color: yellow;
}

.bottom {
  margin-top: 30px;
  background-color: grey;
}

Випадання вертикальних відступів

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

Покажемо на коді, як це відбувається:

<div class="parent-box">
  <div class="child-box"></div>
</div>

.parent-box {
  width: 100px;
  height: 100px;
  margin-top: 10px;
  background-color: blue;
}

.child-box {
  width: 50px;
  height: 50px;
  margin-top: 20px;
  background-color: red;
}

Щоб уникнути цієї пощиреної помилки роблять відступи тільки між двома сусідніми елементами.

Border (Рамка)

border - це властивість в CSS, яка дозволяє вам встановлювати стилі та властивості для границі елемента. Властивість border складається з трьох основних властивостей: border-width, border-style і border-color. Кожна з цих властивостей відповідає за розмір, стиль і колір границі відповідно.

border-width: ширина;
border-style: стиль;
border-color: колір;

border-style встановлює стиль границі. Це може бути solid (тверда лінія), dashed (пунктирна лінія), dotted (крапкована лінія) та інші. Ця властивість також може набувати значення: double (границя подвійна), groove (границя з'являється як виглиблення), ridge (границя з'являється як виступ), inset (границя має вигляд утиснення в середину), outset (границя виглядає як виступ взовні), none (Елемент не має границі).

Також можна встановити всі три властивості border-width, border-style та border-color в одній властивості border в порядку width, style і color:

border: ширина стиль колір;

/* границя товщиною 2 пікселі, тверда лінія, червоний колір */
div {
  border: 2px solid #ff0000; 
}

Індивідуальні рамки

Кожній стороні рамки можна задати свій стиль. Назва вказується у форматі border -тире - сторона(top, right, bottom, left) - тире -властивість (width, style, color):

 border-сторона-властивість: значення;

  /* Cтиль верхньої рамки */
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: red;

  /* Стиль правої рамки */
  border-right-width: 3px;
  border-right-style: dashed;
  border-right-color: blue;

  /* Стиль нижньої рамки */
  border-bottom-width: 4px;
  border-bottom-style: dotted;
  border-bottom-color: green;

  /* Стиль лівої рамки */
  border-left-width: 2px;
  border-left-style: double;
  border-left-color: orange;

Закруглена рамка (Закруглені кути)

Щоб створити закруглену рамку для елемента в CSS, використовують властивість border-radius. Ця властивість визначає радіус закруглення кутів границі елемента. Можна встановити радіус для всіх чотирьох кутів або окремо для верхнього лівого, верхнього правого, нижнього лівого та нижнього правого кутів.

Встановлення одного значення радіусу

div {
  border-radius: 10px; /* Всі кути будуть закруглені з радіусом 10 пікселів */
}

Встановлення різних значень радіусу для кожного кута

div {
  border-top-left-radius: 15px; /* Закруглення верхнього лівого кута з радіусом 15 пікселів */
  border-top-right-radius: 20px; /* Закруглення верхнього правого кута з радіусом 20 пікселів */
  border-bottom-left-radius: 25px; /* Закруглення нижнього лівого кута з радіусом 25 пікселів */
  border-bottom-right-radius: 30px; /* Закруглення нижнього правого кута з радіусом 30 пікселів */
}

Заокруглення можна задавати як у пікселях так і у відсотках.