HTML5 + CSS3 logó
  WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Doboz modell



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