2つのdivの間の境界線を背景色に揃える方法は？

はここCSS

.border { 
display: inline; 
height: 20px; 
padding-top: 10px; 
padding-bottom: 10px; 
padding-left: 40px; 
padding-right: 40px; 
border: 3px solid #eee; 
font-size: 1.4em; 
} 

.background { 
    display: inline; 
    height: 20px; 
    padding-top: 10px; 
    padding-bottom: 10px; 
    padding-left: 40px; 
    padding-right: 40px; 
    background-color: rgba(74, 144, 226, 0.8); 
    font-weight: bold; 
    font-size: 1.4em; 
    border: 0px solid #eee; 
}

ある2 divsは、我々は背景色を揃えていない境界線を見ることができますとおり

次のようになります考えてみましょう。

この理由は何ですか？

出典

2016-06-02 testing

境界線がdivの外側に追加されているためです。それを整列させたい場合は、box-sizing: border-box;を追加するか、ボーダーの代わりにボックスシャドウインセットを使用します。

出典

2016-06-02 05:44:06

、この[plunker]（https://plnkr.co/edit/XOQY3ISY6GtyPZleOXkfを検討？ – testing

ベンダープレフィックスを追加する必要があります。 –

@WimMertens - ['box-sizing'はプレフィックスを付けずにサポートしています。]（http://caniuse.com/#feat=css3-boxsizing ）...接頭辞は必要ありません。 – misterManSam

私はこの

.margin_css { 
 
    margin: 50px; 
 
    
 
} 
 

 
.border { 
 
    display: inline; 
 
\t height: 20px; 
 
\t padding-top: 10px; 
 
\t padding-bottom: 10px; 
 
\t padding-left: 40px; 
 
\t padding-right: 40px; 
 
    font-size: 1.4em; 
 
    -webkit-box-shadow:inset 0px 0px 0px 3px #eee; 
 
    -moz-box-shadow:inset 0px 0px 0px 3px #eee; 
 
    box-shadow:inset 0px 0px 0px 3px #eee; 
 
} 
 

 
.background { 
 
    display: inline; 
 
\t height: 20px; 
 
\t padding-top: 10px; 
 
\t padding-bottom: 10px; 
 
\t padding-left: 40px; 
 
\t padding-right: 40px; 
 
    background-color: rgba(74, 144, 226, 0.8); 
 
    font-weight: bold; 
 
    font-size: 1.4em; 
 
    border: 0px solid #eee; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
    <head> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <div class="margin_css"> 
 
    Margin 
 
    </div> 
 

 
    <div class="border"> 
 
    border 
 
    </div> 
 
    <div class="background"> 
 
    background 
 
    </div> 
 
    
 
    <div class="margin_css"> 
 
    Margin 
 
    </div> 
 
    
 

 
</html>

出典

2016-06-02 05:52:39

私はズームして、背景と等しくない場合は、 – Mani

申し訳ありません、問題を引き起こしていました。スニペットを更新しました –

これはw3schoolsからある問題を解決するためにbox-shadowを使用。実際に高さと幅がどのように計算されるかを説明します。

合計要素幅=幅+左パディング+右パディング+左ボーダー+右ボーダー+左マージン+右マージン

：

要素の合計幅は、次のように計算されるべきです

全素子高さ=高さ+上部パディング+底パディング+上部境界+下罫線+上マージン+ボトムマージン

01：素子の全体の高さは、次のように計算されるべきです

css box-sizingアトリビュートを使用すると、設定された高さと幅に要素コンテンツ以上のものを含めるようブラウザに指示できます。 box-sizing: border-boxを設定すると、幅と高さの設定の一部として、境界線からのすべてがブラウザに含まれます。デフォルトはbox-sizing: content-boxで、余白、余白、罫線の追加幅は除きます。

出典

2016-06-02 05:53:54 jtmingus

あなたは完璧にしたい場合は、境界線のサイズは、フィックスの高さと幅とI要素を使用していない以下の

.border { 
 
display: inline; 
 
height: 20px; 
 
padding-top: 7px; 
 
padding-bottom: 7px; 
 
padding-left: 37px; 
 
padding-right: 37px; 
 
border: 3px solid #eee; 
 
font-size: 1.4em; 
 
} 
 

 
.background { 
 
    display: inline; 
 
    height: 20px; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    padding-left: 40px; 
 
    padding-right: 40px; 
 
    background-color: rgba(74, 144, 226, 0.8); 
 
    font-weight: bold; 
 
    font-size: 1.4em; 
 
    border: 0px solid #eee; 
 
}

\t \t <br><br> 
 
     <div class="border"></div> 
 
     <div class="background"></div>

出典

2016-06-02 05:58:44 Mani

のような背景のパディングから削除する必要があります。要素の高さを作成するためにパディングを使用している場合は、高さを増やす要素に余分なプロパティを使用している場合、与えられたパディングでそれを管理する必要があることに注意する必要があります。

.borderでこのコードを使用しても問題ありません。ボックスsizing`は動作しません `追加

.border { 
    display: inline; 
    height: 20px; 
    padding-top: 7px; 
    padding-bottom: 7px; 
    padding-left: 40px; 
    padding-right: 40px; 
    border: 3px solid #eee; 
    font-size: 1.4em; 
    box-sizing: border-box; 
}

出典

2016-06-02 06:02:08

2つのdivの間の境界線を背景色に揃える方法は？

答えて

関連する問題