margin = külső margó
border = szegély
padding = belső margó
width = tartalom szélessége
height = tartalom magassága
Az elem teljes szélessége = bal külső margó + bal szegély + bal belső margó + tartalom szélessége + jobb belső margó + jobb szegély + jobb külső margó
Az elem teljes magassága = felső külső margó + felső szegély + felső belső margó + tartalom magassága + alsó belső margó + alsó szegély + alsó külső margó
Példa:
Forráskód
<style>
div_1 {
width: 200px; height: 200px;
padding: 30px; margin:7px;
border:5px solid gray; background-color:yellow;
}
</style>
...
<body>
<div class="div_1">
Tartalom
</div>
</body>
Eredmény*
* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: css_doboz_1.html