マージンが国境

Question

シナリオ

を取り除くことに崩壊さIが作成され、ブートストラップグリッド内のDIVを配置しています。私は、DIVの内部に4つのアイテムを整列しています。

1. ヘッダ（相対、100％幅）
2. 段落（アブソリュート - 左下）
3. 段落（アブソリュート - 右下）
4. 背景（絶対値 - 100％の幅、4rem高さ、底部）

Demo

問題

DIV（CSS - Line 118）から枠線を削除すると、（1）の余白は（2）と（3）の余白で崩れます。問題？

注

Iは、ヘッダ内のより多くのコンテンツがある場合に第三のDIVに見えるように、拡大するDIVを必要とするので、私はDIVに固定された高さを割り当てることはできません。

Answer 1

borderなしで動作するように見えますが、 ".content"にはdisplay: flex、 ".title"クラスにはwidth: 100%がありません。 ".content-border-js"と ".content-border-css"についてborderをoutlineと置き換えて、兄弟要素の1つにマウスを移動したときに兄弟要素が動かないようにすることもできます。

.content{ 
    position: relative; 
    z-index: 1; 
    display: flex; 
    margin: 1rem auto; 
    max-width: 25rem; 
    background-color: white; 
    /*border: 1px solid transparent;*/ 
    box-shadow: 2px 2px 2px #bbb; 
    transition: border 100ms ease; 
} 

.content .title{ 
    text-align: center; 
    width: 100%; 
    font-size: 1.3rem; 
    margin: 3rem 1rem 8rem; 
} 

.content-border-js{ 
    outline: 1px solid #f3df49; 
} 
.content-border-css{ 
    oultine: 1px solid #33a9dc; 
} 

EDIT：フレキシボックス WITHOUT

フレキシボックスなしでOK別ソリューション：

は ".contentボーダー-JS" にoutlineを設定し、 ".contentボーダー-CSS"。次に、 ".content"クラスにoverflow: autoを使用します。

.content{ 
    position: relative; 
    z-index: 1; 
    margin: 1rem auto; 
    overflow: auto; 
    max-width: 25rem; 
    background-color: white; 
    /*border: 1px solid transparent;*/ 
    box-shadow: 2px 2px 2px #bbb; 
    transition: border 100ms ease; 
} 

.content-border-js{ 
    outline: 1px solid #f3df49; 
} 
.content-border-css{ 
    oultine: 1px solid #33a9dc; 
}