Notion importante: Certaines balises HTML sont traités comme des "boîtes" (block), tandis que d'autres sont traités comme texte (inline)
Chaque boîte possède une aire de contenu (ex. une texte, une image, etc.) entourée en option par une aire d'espacement (padding),
une aire de bordure (border) et une aire de marge (margin)
Le schéma suivant illustre les relations entre ces aires et la terminologie employée pour les désigner :
La largeur totale d'un élément = width (contenu) + margin (marge) + border (bordure) + padding (espacement)
Voici une div(calque) qui a 200px X 200px (largeur X hauteur).
Voici une division qui a 200x200. Pourquoi elle est plus grande que la précendente? Car elle a aussi un 'padding' de 10px et une bordure de '10px'.
Ces trois divisions ont leurs valeur d'affichage par défaut (bloc)
Ces trois divs ont leur valeur d'affichage définies inline.
Remarqué qu'est ce qui se passe quand on met display:inline
Un exemple comment faire un layout/mise en page avec les div
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut imperdiet tempor nisl sed ultricies. Aenean accumsan dolor et libero iaculis adipiscing. Suspendisse quis ante sit amet dui tempor scelerisque in a lorem. Aenean mi odio, sodales in lacinia nec, feugiat id magna. Quisque pretium nisl nec massa porttitor venenatis. Quisque quis lacus sed nisi ultrices tincidunt. Nam mollis tortor vel lacus fermentum feugiat. Sed laoreet bibendum felis, sit amet euismod lectus vulputate in. Donec felis leo, auctor eu faucibus a, molestie sed tellus.
In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.
Remarquez la balise hr dans cet exemple (ci-dessus) qui a un style = "clear: both;".
Utilisez cette fonction pour effacer des éléments flottants.
Essayez d'effacer l'attribut style="clear:both;" pour voir la difference.
En l'ajoutant, nous sommes en train de dire que les côtés gauche/droit ne doivent pas être flotté, il s'affichera sur une "ligne" seul.
Les autres paramètres sont: None, Both, Left, Right.
Ceci est souvent utilisé lors de l'utilisation d'une approche pour une mise en page flottante div.
In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.
In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.
In sed nunc nec mauris feugiat suscipit. Cras venenatis enim sem. Donec pretium volutpat eros, vel pretium turpis accumsan id. Fusce porttitor volutpat felis non convallis. Aliquam erat volutpat. Aliquam lobortis pretium porta. Vestibulum a justo leo, a pulvinar lacus. Praesent laoreet nisi nec dui bibendum cursus. Donec in lobortis tortor. Quisque urna diam, vehicula auctor vulputate eget, laoreet at sem. Nulla varius pretium pharetra. Mauris sed risus vitae lorem sollicitudin convallis vitae hendrerit justo. Maecenas ligula enim, aliquam ac molestie quis, lobortis sit amet elit. Nam eu purus et mauris fermentum malesuada. Suspendisse potenti.
Raccourci margin:
margin:[top] [right] [bottom] [left]
Raccourci padding
padding:[top] [right] [bottom] [left]
et n'oubliez pas que le padding ajoute de l'espacement à la zone de contenu.