web-dev-qa-db-fra.com

Est-il possible d'ajouter une bordure en dehors de la marge en utilisant CSS?

Je suis sûr que quelqu'un a déjà posé cette question, mais je ne l'ai trouvée nulle part sur Google ou ici. Je suis juste curieux ici quant aux limites du CSS à ce sujet.

Est-il possible d'ajouter la bordure d'un élément en dehors de la marge en utilisant CSS? Fondamentalement, je veux que la bordure soit placée en dehors de la marge au lieu de l'extérieur du rembourrage.

Je comprends comment le modèle de boîte fonctionne en CSS, c'est pourquoi je ne pense pas qu'il soit possible de faire ce que je demande. Cependant, quelqu'un a-t-il trouvé des hacks pour contourner cela?

Merci!

cssbordermargin
10
Obed Marquez Parlapiano

Vous ne pourrez pas le faire avec uniquement la boîte de l'élément, car une boîte est définie par son bord de bordure, pas son bord de marge, et avoir des bordures en dehors de la marge d'un élément interférerait avec l'effondrement de la marge.

Vous pouvez tricher en créant un pseudo-élément avec la bordure souhaitée, mais à l'OMI, c'est plus de problèmes que cela ne vaut. L'élément lui-même doit avoir une valeur de marge égale à la quantité de marge souhaitée plus la largeur de bordure souhaitée, et le pseudo-élément doit être positionné de manière absolue avec l'élément comme bloc conteneur et s'étendre hors de la case par cette somme (en supposant que vous ne voulez pas que la bordure ronge les marges):

html {
    background-color: #fff;
}

body {
    float: left;
    background-color: #ccc;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;
}

div::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;
}
<div></div>

De plus, cela se désagrège complètement une fois que vous avez plus d'un de ces éléments en raison de l'effondrement des marges - et il n'y a pas d'autre moyen que d'ajuster manuellement les marges spécifiques d'éléments spécifiques pour compenser:

html {
    background-color: #fff;
}

body {
    float: left;
    background-color: #ccc;
}

div {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff0;
    margin: 30px;
}

div::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    bottom: -30px;
    left: -30px;
    border: 5px solid #f00;
}
<div></div>
<div></div>
<div></div>
10
BoltClock

Je noterai qu'il y a 1 petit hack utilisant Box-Shadows que vous pouvez implémenter.

Une ombre de boîte s'étend au-delà du remplissage de l'objet. le "Shadow" par défaut est la taille exacte de la boîte, que vous pouvez ensuite déplacer vers la gauche/droite, vers le haut/bas.

Ainsi, par exemple, je pourrais avoir un style de: box-shadow : 0 -15px 0 #f7f7f7

ce qui me donnerait une "bordure 15px" en haut

Ceci n'est utile que si vous avez besoin d'une bordure, comme si vous utilisez bootstrap et que vous voulez que le texte soit en haut de la bootstrap colonne mais que vous souhaitez l'encapsuler dans une couleur, vous pouvez étendre la couleur d'arrière-plan en utilisant une ombre de boîte.

9
Trevor F