WEB-d Développement Web

PHP, SQL, HTML5, CSS3, Javascript, Mootools, Référencement, SEO, CMS, e-commerce, Apache, Linux, Ubuntu, ...

CSS Outline et border

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>
 

Bloc 1
Bloc 2
Bloc 3
Bloc 4

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>
 

Bloc 1
Bloc 2
Bloc 3
Bloc 4

La propriété outline est généralement utilisée pour indiquer le champ actif d'un formulaire...

Articles similaires