Home » 2014 » Октомври » 6 » Урок №8 CSS командата padding
2:31 AM
Урок №8 CSS командата padding

 CSS отстъп (padding)

Отстъп (padding) се използва, за да се освободи място между съдържанието на елемент и неговата рамка.

Подобно на margin, стойностите на отстъпа могат да се задават индивидуално за четирите страни или съкретно - за всички наведнъж.

За стойности на свойството padding се използват:

  • числа, следвани от мерните им единици (px, pt, em и т.н.);
  • проценти (%) - размерът на отстъпа се изчислява като процент от размера на елемента;
  • ключовата дума auto.

Указване на индивидуални отстъпи

Всеки от четирите отстъпа може да бъде зададен отделно:

  • paddign-top: 30px;
  • padding-right: 25px;
  • padding-bottom: 20px;
  • paddiing-left: 15px;

По този начин горният отстъп ще стане 30 пиксела, десния - 25, долния - 20 и левия - 15 пиксела.

Използване на съкратен запис

Както и margin, padding свойството може да бъде зададено по съкратен начин:

  • padding: 30px 25px 20px 15px; Когато padding е използван с четири стойности те означават съответно горен, десен, долен и ляв отстъп.
  • padding: 30px 20px 15px; Трите стойности съответстват на горен, (ляв и десен - равни) и долен отстъп.
  • padding: 30px 20px; Padding с две стойности се използва, когато горния отстъп е равен на долния (първата стойност), а левия - на десния отстъп (втората стойност).
  • padding: 25px; Ако всички отстъпи са равни, те може да се зададат само с една стойност на padding.

Няколко примера

Отстъп в клетки на таблици. По този начин се избягва наблъскването на текста в рамката на табличната клетка:

  • td {padding-left: 0.5em; padding-right:2em}

Отместване на заглавие, за да няма застъпване с включено фоново изображение:

  1. h1 {
  2. background: url(sun.gif) no-repeat;
  3. height: 80px;
  4. padding-left: 130px;
  5. }

 

Категория: CSS | Преглеждания: 600 | Довавено от: knif3r | Оценка: 5.0 | Гласували :2 | Tags: CSS, урок, padding, Начинаещ, Urok, отстъп

Ако урокът ви е харесал можете да го споделите с вашите приятели във фейсбук :
Всички коментари: 0
avatar
Социални Мрежи

PC-Tools.inc | Copyright © 2014-2015
DMCA.com Protection Status Mozilla Firefox+4.0 Chrome+13.2 Opera+5.6 IE+7.9 Safari+2.0