Ангел Арънски · дизайнер Цветове
Margin | Отстояния и центиране
Изтегляне 97.77 Kb.
|
- Навигация на страницата:
- Margin | Отстояния и центиране
- Width, Padding, Margin
- Border-radius | Заобляне
| Margin | Отстояния и центиране
margin: 10px 20px Ще сложи външно отстояние от 20px хоризонтално и 10px вертикално. margin: 10px auto; width: 300px; display: block; Ще сложи вертикално отстояние от 10px и ще центрира блока отляво и отдясно. За да се получи центрирането е задължително елемента да e с display block и да има зададена широчина. margin: 0px 0px -50px 0px; Margin може да има и отрицателна стойност, това може да вкара елемента вътре в границите на други такива или да го изкара от контейнера му. Width, Padding, Margin В картинката е показано как се наслагват вътрешно отстояние (padding), външно отстояние (margin), размери (width/height) и рамки (border). Ще дам пример. Ако сложим на някой елемент width: 200px то съдържанието му ще е точно 200px и съседните елементи ще са долепени директно до него без дори 1px разстояние. Ако обаче добавим
Да речем искаме рамка и ще добавим border: 4px solid #FF0000 тогава забелязваме, че съдържанието ни е директно долепено до рамката и това е грозно. За това слагаме padding:10px и тогава ще имаме разстояние от всяка страна по 10px между съдържанието и рамката. Това обаче леко ни подвежда, понеже сме сложили 200px ширина, а тя всъщност ще е 4px + 10px + 200px + 10px + 4px. Ако се опитваме да поместим 5 такива елемента на един ред в контейнер с ширина 1000px, то няма да можем, освен ако не намалим CSS свойството ширина на всеки елемент, така че крайната им такава да е 200px. Border border: 4px solid #FF0000; Ще постави 4 пикселова рамка с червен цвят. Вместо solid може да сложите dashed или dotted. Така рамката ще стане на тирета или точки. Border-radius | Заобляне -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; Това ще заобли рамката с 12 пиксела отвсякъде. Ако искате да заоблите само горния десен ъгъл, то пак може да зададете стойности по часовниковата стрелка border-radius: 0px 12px 0px 0px Това свойство може да се използва и без да имате рамка (border). Тогава заоблянето ще повлияе на фона на елемента. Изтегляне 97.77 Kb. Сподели с приятели:
|