przeróbmy troszke kod HTML naszego przykładu umieszczając DIV w DIVie
<div id="pole-typ01">
<div id="r-typ09">
<div id="g-typ09">
<div id="b-typ09">B</div></div></div>
</div>
I przetwstujmy różnice pomiędzy MARGIN (przyklad górny [typ 09] ) a PADDING (niżej [typ 10 ] ) MARGIN i PADDING są troche podobne a troche calkiem różne. Podobne bo oba wpływają na odsunięcie sie dwuch elementów od siebie. Różne bo MARGIN działa na elementy na zewnątrz, PADDING na elementy wewnątrz.
/* styl typ09 */
#r-typ09 {border:2px solid red; background-image: url(img/miarka.gif); margin:10px
10px 10px 10px;}
#g-typ09 {border:2px solid green; background-image: url(img/miarka.gif); width:50px;
height:50px;}
#b-typ09 {border:2px solid blue; background-image: url(img/miarka.gif); margin:10px
10px 10px 10px; }
/* styl typ 10 */
#r-typ10 {border:2px solid red; background-image: url(img/miarka.gif); padding:10px
10px 10px 10px;}
#g-typ10 {border:2px solid green; background-image: url(img/miarka.gif);
width:50px; height:50px;}
#b-typ10 {border:2px solid blue; background-image: url(img/miarka.gif); padding:10px
10px 10px 10px;}
Dla G nie ma ustawionego ni Margin ni PADDING. Przy przypisani cechy MARGIN R odsunąl się od POLA przykladu, a B odsunał się od G. Przy przypisani cechy Padding R odepchnął G przykladu, zaś B odepchnęło od swej krawędzi literę.
Tą tylko dajmy teraz zmianę, że pogrubmy BORDER do 10 pixeli, we wszystkich naszych przykładowych DIVach
border:10px
typ 11
Efkt warto by porównac w przeglądarkach respektujących kod i w Internet Explorerze który wyświetla po swojemu, bo tu nie będzie zgodności. W tych przykładach i w poprzednich na tej stronie G ma stałą wielkość 50px, to co się nam teraz zmieniło to poza grubością obrysu, to wielkość DIVa R. Cecha WIDTH odnosi się bowiem do wnętrza DIVa ale wielkość DIVa w calości to należy dodać do tego i grubość obrysu. Warto o tym pamiętać bo gdy DIVy umieszczamy w innym, to biorac tylko pod uwagę Wielkosć DIVa może nam sie to wszytko nie zmiescić, co widac w przykladzie [typ 12]