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:

div {
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:

div {
border-style:solid;
border-width:2px;
}

CSS Border Color
Exemplu:

div {
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:

padding:25px 50px 75px 100px;

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Acest sit folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.