Dimensionner vos balises HTML

CSS propose les propriétés width et height pour imposer des dimensions aux blocs HTML

Les balises de type block

Par défaut, ces balises ont une largeur de 100% et une hauteur définie par leur contenu. Voici quelques balises block :

• div
• header
• h1, h2, h3, etc.
• p, ul, li
• section
• article

Les balises de type inline

Par défaut, ces balises ont une largeur et une hauteur définie par leur contenu. En l’état, ces balises ne sont pas redimensionnables.
Quelques balises inline connues :

• em, strong
• a
• img
• video

Le HTML

    <article>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</article>

Le CSS

    article {
      width: 800px;
      height: 500px;
    }

Les marges permettent de créer des espaces entre les différents blocs HTML

On peut modifier indépendament :

• margin-top : la marge haute
• margin-bottom : la marge basse
• margin-left : la marge gauche
• margin-right : la marge droite

Les balises inline

Elles n’acceptent que les propriétés de marge gauche et droite !

Le HTML

    <article>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</article>
    

Le CSS

    
    article {
      width: 800px;
      height: 500px;
      margin-top: 40px;
      margin-bottom: 60px;
    }
    

Les bordures définissent des contours – ou cadres – aux blocs HTML.

    
        border: 3px solid #ff2a09;    
    

Une bordure se définit par plusieurs propriétés

• La largeur
• Le style
• La couleur

On peut modifier indépendament :

border-top, border-bottom, border-left, border-right

Ou bien les quatre cotés simultanément avec le raccourci border

Exemple

Le HTML

    <p>Lorem ipsum dolor sit sarah connor amet. Ut enim ut aliquip ex ea commodo consequat ad minim veniam.</p>
    

Le CSS

    
    p {
      border: 3px solid #ff2a09;
    }