Урок 7: Поля (margin) і відступи (padding)

Це дуже простий, але в цей же час і потрібний урок. Давайте подивимося, в чому відмінність margin від padding. Для цього, ще разок згадаємо блокову модель в CSS.

Урок 7: Поля (margin) і відступи (padding) - student2.ru

MARGIN ( Поля ) - це відстань від межі (рамки ) блоку , до найближчих елементів , або , якщо їх немає , до країв документа .

PADDING ( Відступи ) - як би внутрішнє Расcтояние , між межею ( рамкою) і вмістом блоку.

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

. p1 {

background - color : # FFE446 ;

border : 1px solid red ;

margin : 70px ;

}

. p2 {

background - color : # FFE446 ;

border : 1px solid red ;

padding : 70px ;

}

. p3 {

background - color : # FFE446 ;

border : 1px solid red ;

margin : 50px ;

padding : 20px ;

}

Ну як розібралися ? якщо читали текст всередині прикладу , то точно розібралися ...

Додаючи вже знайомі нам ключові слова: top , right , bottom , left можна регулювати відступи і поля відповідно зверху , праворуч , знизу , зліва.

p {

margin - top : 50px ;

margin - right : 50px ;

margin - bottom : 50px ;

margin - left : 150px ;

}

Теж саме , тільки в більш скороченої запису:

p {

margin : 50px ;

margin - left : 150px ;

}

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

Можливий також такий варіант запису:

p {

margin : 50px 50px 50px 150px ;

}

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

У яких випадках краще користуватися відступами , а в яких полями ?

А це вже вирішувати Вам , можу тільки дати декілька принципових відмінностей:

Відступи ( padding ) распологаются всередині блоку , а поля ( margin ) - за їх межами ;

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

Урок 8: Шари в CSS.

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

Створюючи блок в CSS , ми завжди чітко задаємо його параметри , а також позиціонуємо його в певне місце на екрані. Таким чином , будь-який блок має дві координати X і Y , які визначають положення блоку на площині екрану . Але в CSS є ще і третя , просторова координата Z , яка визначає номер шару , на якому знаходиться блок . Тобто чим більше координата Z , тим вище цей шар знаходиться по відношенню до решти . Наприклад шар з номером 2 буде ближче розташований до користувача , переглядає вашу сторінку , ніж шар з номером 1 . А шар з номером 1 , буде розташовуватися вище , ніж основний код сторінки .

За створення шару в CSS відповідає властивість Z- index , а прийняті ним значення , вказують номер шару .

Наприклад , можна зробити з карт знамениту комбінацію Royal Flash .

Урок 7: Поля (margin) і відступи (padding) - student2.ru

Як бачите , кожна карта , трохи перекриває іншу. Ось як це виглядає в коді :

. desatka_buba {

position : absolute ;

left : 200px ;

top : 200px ;

z - index : 1 ;

}

. valet_buba {

position : absolute ;

left : 215px ;

top : 215px ;

z - index : 2 ;

}

. dama_buba {

position : absolute ;

left : 230px ;

top : 230px ;

z - index : 3 ;

}

. korol_buba {

position : absolute ;

left : 245px ;

top : 245px ;

z - index : 4 ;

}

. tuz_bubna {

position : absolute ;

left : 260px ;

top : 260px ;

z - index : 5 ;

}

Ну а в html коді , просто привласнюєте малюнкам відповідні стилі , типу :

<img src="10buba.gif" class="10_buba"> ну і так далі .

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

Наши рекомендации