Този урок ще засегне две неща: отстъпите от външната част и външните рамки.
Започваме с отстъпите от външната част. За елемент p, директно дефиниран в body, ангажиментите за лявата и дясната страна на прозореца означават отстоянието до външните граници на елемента body. При последователни параграфи ангажиментите за външната рамка горе и долу означават разстоянието между отделните параграфи.
При дефинирането на външните отстъпи и рамки са възможни и отрицателни стойности, които могат да предизвикат прекривания.
Дефиниране на отстъпа от външната част
Външната рамка и отстъп са задължителния празен пространство между текущия елемент и неговия управляващ или съседен елемент. Следните CSS свойства са подходящи за HTML елементи, които създават собствени параграфи или образуват блок.
При margin става въпрос за кратка форма на четирите свойства margin-top, margin-right, margin-bottom и margin-left. Възможни са следните стойности:
• auto – отстъпът от външната част се изчислява автоматично.
• Процентово изражение – отнася се до елемента, за който е посочен маргинът.
• Дължиново изражение – позволени са и отрицателни стойности. Това позволява прекриването на елементи.
Разрешени са до четири стойности:
• една стойност – отстъпът от външната част горе, долу, ляво и дясно
• две стойности – първата стойност за отстъпа от външната част горе и долу, втората стойност за отстъпа от външната част дясно и ляво
• три стойности – първата стойност за отстъпа от външната част горе, втората стойност за отстъпа от външната част ляво и дясно, третата стойност за отстъпа от външната част долу
• четири стойности – първата стойност за отстъпа от външната част горе, втората за дясно, третата долу и четвъртата ляво.
Следният пример показва използването на общите свойства на margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Сглобяване на камерно оръдие</p>
<p class="ex">В този видео урок ще научите как да създадете камерно оръдие и да го движите сигурно през 3D пространството. Приложителен файл е включен.</p>
</body>
</html>
В този пример са дефинирани два текстови параграфа.
На втория параграф са зададени разстояния също.
margin: 30px 50px 30px 50px;
Тази спецификация означава следното:
• 30 пиксела разстояние нагоре
• 50 пиксела разстояние надясно
• 30 пиксела разстояние надолу
• 50 пиксела разстояние наляво
Единични спецификации за разстоянията
Преди това беше представена общата спецификация за margin, но можете да направите и индивидуални спецификации. Чрез следните свойства можете да определите разстоянието отгоре, отляво, отдолу или отдясно за отделните страни на един елемент.
• margin-top – външният разстояние/отстъп отгоре
• margin-right – външният разстояние/отстъп отдясно
• margin-bottom – външният разстояние/отстъп отдолу
• margin-left – външният разстояние/отстъп отляво
За всички четири свойства могат да бъдат използвани следните стойности:
• auto – отстъпът от външната част се изчислява автоматично.
• Процентово изражение – отнася се до елемента, за който е посочен маргинът [отгоре, отдясно, отдолу, отляво].
• Дължиново изражение – позволени са и отрицателни стойности. Това позволява прекриването на елементи.
Следният пример показва как може да се използват индивидуалните спецификации ефективно.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Сглобяване на камерно оръдие</p>
<p class="ex">В този видео урок ще научите как да създадете камерно оръдие и да го движите сигурно през 3D пространството. Приложителен файл е включен.</p>
</body>
</html>
Резултатът в браузъра изглежда по следния начин:
Дефиниране на вътрешния отстъп
При вътрешния отстъп става въпрос за задължителното празно пространство между съдържанието на елемента и неговия собствен край на елемента. Подходящи са следните CSS свойства в HTML елементите, които създават собствени параграфи или образуват блок.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Сглобяване на камерна рамка</p>
<p class="ex">В този видео урок ще научите как да създадете камерна рамка и да я движите сигурно из тримерното пространство. Приложен е проектен файл.</p>
</body>
</html>И ето го и резултатът в браузъра:
Чрез четирите Padding свойства могат да се дефинират вътрешните разстояния. Предоставени са следните четири CSS свойства:
• padding-top – разстояние между горната част на съдържанието и горния край
• padding-bottom – разстояние между долната част на съдържанието и долната крайна граница
• padding-left – разстояние между лявата част на съдържанието и лявата крайна граница
• padding-right – разстояние между дясната част на съдържанието и дясната крайна граница.
За всички четири свойства могат да се използват следните стойности:
• Процентно измерение – отнася се до родителския елемент
• Дължиново измерение
