CSS Outline et border
Posté le Tuesday 4 September 2012 | Catégories : CSS
La propriété CSS outline ressemble très fort à la propriété border, mais est nettement moins connue. Elle présente pourtant un énorme avantage: elle ne modifie pas la taille finale calculée de l'élément!
Ceci peut énormément faciliter la comptabilité lors de la création d'un site adaptatif:
<div style="float: left; width: 25%; height: 100px; outline: 1px solid grey">
Permet de placer 4 blocs l'un à côté de l'autre, malgré la présence d'une bordure de 1px!
</div>
Avec la propriété "border", la largeur totale calculée serait légèrement supérieure à 25%, et on ne pourrait donc pas placer 4 blocs sur une ligne:
<div style="float: left; width: 25%; height: 100px; border: 1px solid grey">
A cause de la bordure, le 4ème bloc ira à la ligne!
</div>
La propriété outline est généralement utilisée pour indiquer le champ actif d'un formulaire...
