Css внутрішній і зовнішній відступ

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

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

Властивості padding і margin можуть приймати від одного до чотирьох значень:

Де значення встановлюються за годинниковою стрілкою, починаючи з верхнього:


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

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

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

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

З цією темою дивляться:

Схожі статті