web-dev-qa-db-ja.com

CSSを使用してマージンの外側にボーダーを追加することは可能ですか？

誰かがこの質問を既にしたのは確かですが、Googleでもここでも見つけることができませんでした。これに関するCSSの制限についてここで知りたいだけです。

CSSを使用して、要素の境界線をマージンの外側に追加することはできますか？基本的に、ボーダーはパディングの外側ではなく、マージンの外側に配置します。

ボックスモデルがCSSでどのように機能するかを理解しています。このため、私が求めていることを実行することは不可能だと思います。しかし、誰かがこれを回避するためのハックを見つけましたか？

ありがとう！

cssbordermargin
10
Obed Marquez Parlapiano

要素のボックスだけではこれを行うことはできません。ボックスはマージンエッジではなくボーダーエッジで定義されており、エレメントのマージンエッジの外側にボーダーがあると、マージンの縮小が妨げられます。

希望の境界線で疑似要素を作成することでごまかすことができますが、IMOはそれよりも問題が多くなります。要素自体には、目的のマージン量に等しいマージン値が必要ですplus希望する境界線の幅。疑似要素は、要素を含むブロックとして絶対的に配置し、外側に拡張する必要がありますこの合計によるボックス（境界がマージンに食い込みたくない場合）：

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>

さらに、マージンの縮小によりそのような要素が複数あると、これは完全にバラバラになります。これを回避するには、特定の要素の特定のマージンを手動で調整して補正するしかありません。

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

Box-Shadowsを使用して実装できる小さなハックが1つあることに注意します。

ボックスの影はオブジェクトのパディングを超えて広がります。デフォルトの「シャドウ」はボックスの正確なサイズで、左/右、上/下にシフトできます。

したがって、たとえば、私は次のようなスタイルを持つことができます：box-shadow : 0 -15px 0 #f7f7f7

これにより、上部に「15pxの境界線」が表示されます

これは、bootstrapを使用していて、テキストをbootstrap列ですが、色で囲みたい場合は、ボックスシャドウを使用して背景色を上に拡張できます。

9
Trevor F