CSS · Leçon 3

Le modèle de boîte

En CSS, tout est une boîte. Comprendre ses 4 couches, c'est comprendre 80 % des problèmes de mise en page.

Les 4 couches

margin — marge extérieure (transparente)
border — bordure
padding — marge intérieure
contenu (width × height)

Déplace les curseurs et observe :

contenu

      

    

  


  

    
Le piège de la largeur : box-sizing

    
Par défaut, width = largeur du contenu seul. Le padding et la bordure s'ajoutent ! Avec border-box, width = largeur totale. Beaucoup plus simple.

    



    

    
À mettre au début de chaque projet *, *::before, *::after { box-sizing: border-box; }

  


  

    
Raccourcis : 1, 2 ou 4 valeurs


margin: 10px;                 /* les 4 côtés */
margin: 10px 20px;            /* haut+bas | gauche+droite */
margin: 5px 10px 15px 20px;   /* haut | droite | bas | gauche (sens des aiguilles d'une montre) */
margin: 0 auto;               /* centre horizontalement un bloc qui a une largeur */
padding-top: 8px;             /* un seul côté */
border: 2px solid red;        /* épaisseur | style | couleur */

    

      
padding: 10px 30px; donne…

      
    
        
  1. 10px en haut, 30px en bas
    2. 
        
  2. 10px en haut et en bas, 30px à gauche et à droite
    3. 
        
  3. 10px à gauche, 30px à droite
    4. 
      

      
Avec 2 valeurs : la 1re pour le vertical, la 2e pour l'horizontal.

    

  


  

    
Block, inline, inline-block

    



    

    

      
Va à la ligne ?width / height ?Exemples

      
blockOui, prend toute la largeurOuidiv, p, h1, ul, section

      
inlineNon, reste dans le texteNonspan, a, strong, em

      
inline-blockNonOui(à choisir en CSS)

    

    
Bonus : display: none fait complètement disparaître un élément.

  


  

    
À toi de jouer

    

      
Le bouton parfait

      
Transforme le lien .btn en bouton :

      
    
        
  • display: inline-block, padding 12px en haut/bas et 24px à gauche/droite.
    • 
        
  • Fond royalblue, texte white, pas de soulignement.
    • 
        
  • Coins arrondis de 8px.
    • 
      

      



      

      
IndiceUn lien est inline : il ignore une partie du padding. Commence par display: inline-block.

      
Indicepadding avec 2 valeurs : vertical, puis horizontal. Le soulignement se retire avec text-decoration: none.

      
IndicePresque tout :
.btn {
  display: inline-block;
  padding: 12px 24px;
  background: royalblue;
  color: white;
  ...
}


    


    

      
La carte centrée

      
    
        
  • .carte fait 300px de large au total (pense à box-sizing).
    • 
        
  • Elle est centrée horizontalement dans la page.
    • 
        
  • Padding de 20px, bordure 1px solid #ddd, coins arrondis 12px.
    • 
        
  • Une ombre : box-shadow: 0 4px 12px rgb(0 0 0 / 15%).
    • 
      

      



      

      
IndicePar défaut, width ne compte que le contenu : padding et bordure s’y ajoutent. box-sizing: border-box les inclut dans la largeur.

      
IndiceUn bloc qui a une largeur se centre avec des marges automatiques à gauche et à droite : margin: 20px auto.

      
IndiceLes propriétés à ajouter :
box-sizing: border-box;
width: 300px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: ...;


    

  


  

    
À retenir