Mi az a doboz (box)?

A dobozoknak a designn�l �s az elrendez�sn�l van jelent�s�ge, ebb�l a szempontb�l minden HTML objektumot egy doboznak lehet tekinteni. A dobozoknak n�gy f� r�sz�k van:

• Marg�: a dobozon k�v�l van, �tl�tsz�, �s a t�bbi elemt�l val� t�vols�got adja meg. Amikor a gportalos oldaladra besz�rsz egy k�pet, �s be�ll�tod a v�zszintes �s f�gg�leges t�vols�got, akkor marg�t adsz a k�pnek. Ezt CSS-ben term�szetesen r�szletesebben is meghat�rozhatod, ak�r mind a n�gy oldalnak k�l�n marg�t �ll�thatsz be!
  
• Keret: A keretnek lehet sz�ne, vastags�ga �s st�lusa. Ezzel sokat lehet j�tszani, vannak egyszer�ek (folytonos, szaggatott, pontozott vonal) �s �rdekesebbek, pl. a 3D hat�s�ak.
  
• Bels� marg�: ez megint �tl�tsz�, ez a tartalom �s a keret t�vols�g�t adja meg, pl. a sz�vegdobozokn�l, t�bl�zatokn�l nagyon hasznos.
  
• Tartalom: lehet b�rmi, leggyakrabban sz�veg vagy k�p(ek)
  

  Fontos: ha valaminek a m�reteit CSS-sel szeretn�d megadni, tudnod kell, hogyan �p�lnek fel a boxok, mivel nem csak a tartalomnak van magass�ga, hanem a marg�nak, keretnek �s a bels� marg�nak is lehet, �gy pedig - ha nem sz�molsz ut�na - k�nnyen m�s kin�zetet kaphatsz, mint ahogy tervezted. Itt egy p�lda:

height:60px;
padding:8px;
border:4px dotted pink;
margin:8px;

Ez azt jelenti, hogy a tartalom magass�ga 60 pixel, a k�ls�- �s bels� marg� 8-8 pixel, a keret pedig 4 pixel. Mivel tartalomb�l egy van, keretb�l, k�ls�- �s bels� marg�b�l viszont alul is �s fel�l is van, �gy lehet kisz�molni a p�ld�ban szerepl� doboz teljes magass�g�t: 60+2x(8+4+8)=100 pixel. �gy j�n ki:

tartalom magass�ga + a marg�, a keret �s a bels� marg� vastags�g�nak k�tszerese

m�sk�pp le�rva:

tartalom magass�ga + 2(marg� + keret + bels� marg�)

<< vissza a CSS k�dokhoz!