display

En css, les balises peuvent avoir plusieurs comportement de boite (box). Les deux principes de boites sont block et inline. Ils correspondent respectivement aux comportement par défaut des balises HTML div et span que nous avons déjà vues.

on peut modifier le comportement de boite avec la propriété CSS display.

display: block;
display: inline-block;
display: inline;
display: none;

la proprité display:none; permet de masquer une balise.

la propriété display:block; permet de forcer un affichage block (comme une div) il provoquera un retour à la ligne après et avant la balise.

la propriété display:inline; permet de forcer un affichage inline (comme une span) il mettra la balise dans le flux du texte

la propriété display:inline-block; permet de forcer un affichage inline-block. Cette affichage est très pratique car il combine le fait de préserver le flux de texte, mais permet d’utiliser les propriétés de block (width, height, padding, …)

Modèle de boite (box model)

Les boites CSS possèdent de nombreuses propriétés qui permettent de modifier la taille et la position du bloc par rapport aux autres éléments de la page. C’est ce que nous nommons le modèle de boite. Il est assez riche et complexe.

voici un exemple appliqué.

width: 100px;
height: 200px;
border: 10px solid blue;
margin: 30px;
padding: 30px;

margin marges

les marges sont des espaces relatifs autour, à l’extérieur de la boite.

padding marges intérieures

les marges intérieures sont des espaces relatifs autour, à l’intérieur de la boite.

border bordures

les bordures sont des espaces intercalés entre le padding et le margin de la boite.

notations des contours

Les propriétés qui affectent le contour de la boite (padding,border et margin) sont généralement noté de manière raccourcie. Ainsi quand on écrit

padding: 10px;

toutes les marges intérieures du bloc sont affectées, dans cet ordre : haut, droite, bas, gauche.

Il est possible de préciser spécifiquement chacun des côtés avec cette notation :

padding: 10px 0px 20px 30px;
/*
	TOP / RIGHT / BOTTOM / LEFT
	> sens horaire en partant de midi.
*/

Cette notation raccourcie est valable pour les propriétés margin, border et padding (ainsi que toutes les propriétés qui affectent les contours des boites).

Si vous n’êtes pas à l’aise avec cette notation raccourcie, vous pouvez utiliser la notation non raccourcie

padding: 10px 0px 20px 30px;
/*	équivaut à :            */
padding-top: 10px;
padding-right: 0px;
padding-bottom: 20px;
padding-left: 30px;

box-sizing mode de redimensionnement de boite

Par défault, la largeur et hauteur des boites définies en CSS avec width et height s’applique sans compter les padding ni les border. Ce comportement n’est parfois pas confortable. Pour cela une propriété box-sizing a été mise en place, pour inclure le padding ou la bordure.

box-sizing:padding-box; /* inclu le padding */
box-sizing:border-box; /* inclu le padding et la bordure */