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 :


Explication des dimentions d'une boite
La largeur totale d'un élément = width (contenu) + margin (marge) + border (bordure) + padding (espacement)

Exemple 1

Voici une div(calque) qui a 200px X 200px (largeur X hauteur).

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.

Exemple 2

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'.

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.

Exemple 3

Ces trois divisions ont leurs valeur d'affichage par défaut (bloc)

Premier
Deuxieme
Troisieme

Exemple 4

Ces trois divs ont leur valeur d'affichage définies inline.

First
Second
Third

Exemple 5

Même chose pour les balises h3 ... remarqué qu'ils ont la valeur display: block par défaut

Ceci est une balise H3

Ceci est une balise H3

Ceci est une balise H3

Exemple 6

Remarqué qu'est ce qui se passe quand on met display:inline

This is an H3

This is an H3

This is an H3

Exemple 7

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.

Mon blog

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.

Exemple 8 (Bordures)

border-style:none;
border-style:solid;
border-style:dotted;
border-style:dashed;
border-style:double;
border-style:groove;
border-style:ridge;
border-style:inset;
border-style:outset;

Exemple 9

overflow:auto;

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.

overflow:scroll;

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.

overflow:hidden;

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.

overflow:visible;

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.

 

 

 

 

 

 

 

 

Exemple 10 - Exemples Padding et Margin

margin-left:50px;

Raccourci margin:

margin:[top] [right] [bottom] [left]

Exemple 11

Centré à l'aide magin-left:auto; and margin-right:auto;
Le navigateur calcule et utilise une marge automatiquement quand on utilise auto.

Exemple 12

Padding de 20px sur toute les cotés.

Raccourci padding

padding:[top] [right] [bottom] [left]

et n'oubliez pas que le padding ajoute de l'espacement à la zone de contenu.

Exemple 13

Coins arrondis!
Coins arrondis sur top-left et bottom-right.

Exemple 14

Utilisation du outline-color avec la frontiere.

Exemple 15 (Invisible)

Cette division ne sera pas visible

Exemple 16

cursor:auto;
cursor:crosshair;
cursor:default;
cursor:default;
cursor:move;
cursor:pointer;
cursor:text;
cursor:wait;
cursor:e-resize;
cursor:ne-resize;
cursor:nw-resize;
cursor:n-resize;
cursor:se-resize;
cursor:sw-resize;
cursor:s-resize;
cursor:w-resize;