• Taille avec bordure et padding

    Vous avez sans doute constaté qu'une image d'une taille précise, prend du "volume" en lui ajoutant une bordure, ce qui peut être gênant, si la page ne contient plus cette image ou si elle entre dans un montage, avec une place bien précise.

    La valeur du padding est l'espace entre le bord de l'image avec la bordure et les autres éléments; en ajoutant une bordure et du padding, la dimension de votre image va devenir:

    largeur + padding + bordure.

    Voici une image de 600x450px, sans bordure ni padding:

    Taille avec bordure et padding

     

     

    Ajoutons, à cette image,  une bordure blanche de 20 px: le padding étant peu utilisé par beaucoup; il est représenté ici, par le liseré noir, pour indication.

    Taille avec bordure et padding

    Largeur totale: 640px et hauteur 490px.

    Largeur image+bordure: 620 x 470 px;

    Largeur image: 600 x 450 px.

     

     

    Pour que image+padding+bordure restent à la dimension 600x450px, nous pouvons écrire:

    Taille

    Taille

     

     

     Image de gauche, avec bordure de 20 px mais toujours une dimension de 600x450px; image de droite, origine, sans décoration.
    <p ><img style="width: 600px; height: 450px; border: 20px solid white; box-sizing: border-box; -webkit-box-sizing: border-box;" src="http://ekladata.com/Hd0sVGftf7HB6A1jznsuoxTaq-0.jpg" alt="Taille" /></p>

     

     

    Ce code évite de calculer la largeur de l'image avec bordure, afin de la placer dans une dimension imposée.; avec padding de 20px sur l'image avec bordure:
    Regardons l'action du padding, selon sa position dans le code même si c'est plus l'action sur la bordure qui sera sans doute utilisée.

    Taille

     

    <p style="float: left; width: 600px; height: 450px; border: 1px solid black; padding: 20px;"><img style="width: 600px; height: 450px; border: 20px solid white; box-sizing: border-box; -webkit-box-sizing: border-box;" src="http://ekladata.com/Hd0sVGftf7HB6A1jznsuoxTaq-0.jpg" alt="Taille" /></p>

    Le padding est placé dans le paragraphe et éloigne donc son contenu de 10px, de tout côté.

     

     

    Taille

    <p style="float: left; width: 600px; height: 450px; border: 1px solid black;"><img style="width: 600px; height: 450px; padding: 20px; border: 20px solid white; box-sizing: border-box; -webkit-box-sizing: border-box;" src="http://ekladata.com/Hd0sVGftf7HB6A1jznsuoxTaq-0.jpg" alt="Taille " /></p>

    Le padding est placé sur l'image et éloigne la bordure de 10 px, de tout côté.