• box-sizing

    J'ai déjà proposé une page sur cet attribut qui permet de dimensionner un cadre avec bordure et espacement intérieur (padding) sans ajouter à la dimension du cadre cette bordure et cet espacement.

    Pour rappel, lorsque vous dimensionnez un cadre ou une image à 200px (par exemple) et que vous lui ajoutez une bordure de 10px, le montage fera 200px+10px+10px=220px.

    De la même façon, lorsque vous éloignez des bords, le contenu du cadre, (padding), si le cadre mesure 200px et le padding est de 10px, le montage fera 200px+10px+10px=220px.

    Si vous cumulez les deux, le montage fera 200px+10px+10px+10px+10px=240px.

    Si votre cadre est seul dans l'article, cela peut ne pas être gênant mais si vous voulez placer plusieurs images les unes à côtés des autres, vous risquez de dépasser la largeur de votre zone article.

    Par défaut, les bordures et espacements intérieurs s'ajoutent à la largeur de l'élement; un attribut: box-sizing:border-box; permet de conserver la largeur hors-tout de votre cadre en incluant bordure et padding.

    Ainsi, si vous voulez faire un cadre de 600px de large, contenant 3 images de 200px de large avec bordure et éventuellement padding (surtout intéressant pour du texte), il vous suffira de dimensionner les 3 images bordées en box-sizing:border-box;

    Un site explicatif: ICI.

    Exemple avec 3 images dimensionnées en 320px par 180px dans un cadre de 960px par 180px, bordure rouge, image en fond de paragraphe puis en image, dans le deuxième exemple.

     

    Le paragraphe du texte peut aussi, comprendre du padding et une bordure.

     

    <div style="width: 960px; height: 180px; border: 4px solid red; margin: 5px auto;">
    <p id="bx1">&nbsp;</p>
    <p id="bx2">Le paragraphe du texte peut lui, comprendre du padding et une bordure.</p>
    <p id="bx3">&nbsp;</p>
    </div>

    <style><!--
    #bx1{float:left; box-sizing:border-box; border:6px solid white; width:320px; height:180px; border:6px ridge grey; background:url('http://ekladata.com/cIR8KowfPHFK2oAygSKhhsMdkbY@320x180.jpg'); background-size:cover;}
    #bx2{float:left; box-sizing:border-box; border:6px solid white; width:320px; height:180px; border:6px ridge grey; padding:10px; text-align:center; font-size:20px;}
    #bx3{float:left; box-sizing:border-box; border:6px solid white; width:320px; height:180px; border:6px ridge grey; background:url('http://ekladata.com/YmlRFSIQ49cPqaZRcC8x12WmUmw@320x180.jpg'); background-size:cover;}
    --></style> 

    <div style="width: 960px; height: 180px; border: 4px solid red; margin: 5px auto;"><img id="bxa" class="bx" src="http://ekladata.com/cIR8KowfPHFK2oAygSKhhsMdkbY@320x180.jpg" alt="" /> <img id="bxb" class="bx" src="http://ekladata.com/YmlRFSIQ49cPqaZRcC8x12WmUmw@320x180.jpg" alt="" /> <img id="bxc" class="bx" src="http://ekladata.com/TQlNqHve10jXhnbaMI5gY0UE6bI@320x180.jpg" alt="" /></div>

    <style><!--
    .bx{float:left; width:320px; height:180px;border:6px ridge white;}
    #bxa,#bxb,#bxc{box-sizing:border-box;}
    --></style> 

    D'après mes bricolages, il semble qu'il faille écrire l'attribut box-sizing:border-box sur chaque identifiant et non dans la class (?)