Gestion des bordures intérieurs et extérieurs en CSS

L'affichage intérieur ou extérieur des bordures en CSS dépend de la définition de type de document (doctype) utilisé pour vos pages.
Par exemple si vous utilisez le doctype suivant alors les bordures seront intégrés dans la largeur de votre bloc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html dir="ltr" lang="fr">
[...]

En revanche si vous utilisez le doctype "strict" les bordure seront extérieurs à votre bloc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
[...]

Voici un résumé sur les différences entre ces deux cas. Pour information la bordure est de 5 pixels (grise) afin de bien marquer la différence. Le cadre rouge permet de délimiter la limite du bloc.

http://www.maraumax.fr/medias/Billets/css-bordures-interieurs-exterieurs.png
La position des bordures peux parfois vous gêner si vous souhaitez aligner les blocs sur votre site.

La solution consiste à ajouter une marge si la largeur de votre bloc est fixe ou réduire la taille de votre bloc si elle est fixe.

/* Dans le cas d'une largeur fixe */
div.bloc {
	border: 5px solid #000; /* Bordures de 5px (Donc 10px pour le bloc) */
	width: 90px; /* Largeur finale : 100px */
}
 
/* Dans le cas d'une largeur extensible */
div.bloc {
	border: 5px solid #000;
	width: 100%; /* Impossible de réduire la taille de 10px */
	margin: 0px 5px; /* Marges de 5px de la taille de la bordure de chaque cotés du bloc */
}

Bon codage à vous !

Billets relatifs

1 Commentaire(s)

  1. Commenté par flanagan99 le mercredi 26 janvier à 10:12

    C'est la première fois que j'entends parler que le doctype joue un rôle sur les bordures
    quand bien même ça ne passera pas sur tout les navigateurs

  2. Réponse

    A noter que je n'ai pas dit qu'il fallait changer le Doctype pour avoir le rendu souhaité wink

Ajouter un commentaire





Les commentaires sont validés manuellement afin d'éviter le spam.