Tutorial CSS – Margin, Border si Padding
Atribute esentiale pentru incadrarea continutului web:
margin – distanta intre border si marginea paginii;
border – marginea si cutia care incadreaza continutul;
padding – distanta intr border si continut;
content – continutul propriu-zis al paginii web (text, imagini, etc)
Exemplu de fisier CSS:
width:200px;
padding:15px;
border:5px solid;
margin:15px;
}
CSS – Border Style
Css border reprezinta o bordura de jur-imprejurul continutului.
Valori border-style:
– none
– solid
– dotted
– dashed
– double
– groove
– ridge
– inset
– outset
Exemplu DEMO CSS:
border-style:solid;
border-width:2px;
}
CSS Border Color
Exemplu:
border-style:solid;
border-color:red;
}
CSS – Margin
Atributul margin stabileste marginea dintre elementele unui continut web.
Exemplu:
margin: 30px 20px 30px 50px; (sus, dreapta, stanga, jos)
margin: 30px 20px 50px; (sus, dreapta si stanga, jos)
margin: 30px 20px (sus si jos, dreapta si stanga)
margin: 30px (sus jos dreapta si stanga)
CSS Padding
Padding se refera la regiunea dintre continut si bordura (border). Vom stabili aceasta regiune in acelasi fel ca si la atributul margin, folosind:
– padding-top:10px;
– padding-bottom:10px;
– padding-right:20px;
– padding-left:20px;
Exemplu CSS: