Secció 4: Posicionament CSS

3. Dimensions d'una caixa

3.1. width

La propietat width especifica l'amplada de l'àrea de contingut de les caixes generades per elements de bloc.

És important observar que indica exclusivament l'amplada de l'àrea de contingut, sense comptar les àrees padding, border ni margin. Així l'amplada total d'una caixa ve donada per la suma de width i els padding, border i margin horitzontals.

L'altre aspecte a tenir present és que podem utilitzar width per determinar l'amplada dels elements de bloc (DIV, P, Hx...) però no la dels elements inline (SPAN, A, EM...). Per a una explicació més detallada sobre els elements inline, consulta l'apartat 7 d'aquesta mateixa secció. Com veurem a l'apartat 3.3, la propietat width afecta també a un determinat tipus d'element inline: els elements inline reemplaçats (inline replaced elements)

Els valors que pot prendre width són:

• longituds
• percentatges. Es calculen respecte l'amplada del bloc contenidor (que ja has vist a l'apartat 2.1 d'aquesta mateixa secció: 'Elements de bloc. Elements inline')
• auto (valor per defecte). Veurem aquest valor a l'apartat 6: 'Càlcul de marges i dimensions'.

No es poden assignar valors negatius a width, cosa que d'altra banda no tindria sentit.

A l'apartat següent s'explica la propietat height, i es presenten alguns exemples.