Урок 16. Adjusting the Padding of an Element връзка>>
Нека за известно време да оставим приложението за Cat Photo и да научим повече за стила на HTML.
Може би вече сте забелязали това, но всички HTML елементи по същество са малки правоъгълници.
Три важни свойства контролират пространството, което обгражда всеки HTML елемент:
padding, margin и border.
padding елемента контролира разстоянието между елемента и неговият border.
Тук можем да видим, че синята и червената кутия са вложени в жълтата кутия. Имайте предвид, че червената кутия има по-голям padding от синята кутия.
Когато увеличите padding на синята кутия, това ще увеличи разстоянието между текста и границата около него.
Задачата е: Променете padding на синята кутия, за да съответства на тази на червената кутия.
Урок 17. Adjust the Margin of an Element
margin на даден елемент контролира разстоянието между border/границата/ на елемента и заобикалящите го елементи.
Тук може да видите, че синята и червената кутия са вложени в жълтата кутия. Имайте предвид, че червената кутия има по-голяма margin от синята кутия, което я прави по-малка.
Когато увеличите margin на синята кутия, това ще увеличи разстоянието между нейната граница и околните елементи.
Задачата е: Променете margin на синята кутия, за да съответства на тази на червеното поле (т.е. 20px на margin).
Урок 18. Add a Negative Margin to an Element
margin на даден елемент контролира разстоянието между border/границата на елемента и заобикалящите го елементи.
Ако зададете отрицателна стойност на margin на даден елемент , елементът ще се увеличи.
Опитайте се да зададете отрицателна стойност на margin на синьото поле, както тази за червеното поле.
Задачата е: Променете margin на синята кутия на -15px, така че тя да запълни цялата хоризонтална ширина на жълтата кутия около нея.
Урок 19. Add Different Padding to Each Side of an Element
Понякога ще искате да персонализирате даден елемент, така че той да има различен padding от всяка страна.
CSS ви позволява да контролирате padding на елементите от четирите му страни със свойствата
padding-top, padding-right, padding-bottomи padding-left.Задачата е: Дайте на синьото поле padding от 40px на горната и лявата страна, и 20px в долната и дясната страна.
Урок 20. Add Different Margins to Each Side of an Element
Понякога ще искате да персонализирате елемент, така че да има различен margin на всяка от неговите страни.
CSS ви позволява да контролирате margin на елемент от всичките му четири страни с
margin-top, margin-right, margin-bottom, и margin-left.Задачата е: Дайте на синята кутия margin от 40px на горната и лявата страна, и 20px в долната и дясната страна.
Урок 21. Use Clockwise Notation to Specify the Padding of an Element
Вместо да укажете свойствата на елемента по отделно
padding-top, padding-right, padding-bottom, и padding-left, можете да ги посочите всички в един ред, както следва:
padding: 10px 20px 10px 20px;
Тези четири стойности работят като часовник: top, right, bottom, left /отгоре, отдясно, отдолу, отляво/ и ще имат точно същия резултат като използването на специфичните padding инструкции.
Задачата е: Използвайте означението по часовниковата стрелка, за да дадете на класа ".blue-box" padding от 40px на горната и лявата страна, и 20px на долната и дясната му страна.
Урок 22. Use Clockwise Notation to Specify the Margin of an Element
Да опитаме отново, но този път с margin.
Вместо да укажете свойствата на маркера
margin-top, margin-right, margin-bottom, и margin-left можете да ги посочите всички в един ред, както следва:
margin: 10px 20px 10px 20px;
Тези четири стойности работят като часовник: top, right, bottom, left /отгоре, отдясно, отдолу, отляво/ и ще генерират точно същия резултат като използването на инструкциите за страничните margin.
Задачата е: Използвайте означението по посока на часовниковата стрелка /Clockwise Notation/, за да дадете на класа blue-box граница от 40 пиксела отгоре и отляво, и 20 пиксела в долната и в дясната му страна.
Продължете към следващия урок: CSS Attribute Selectors, Absolute and Relative Units
Всички уроци от Responsive Web Design>>