私の国境の内側にdivタグを取得するにはどうすればいいですか？

私は新しいプロジェクトに取り組んでおり、divタグに罫線を追加すると、divが境界になくなるようにdivがシフトするという問題が発生しました。私の国境の内側にdivタグを取得するにはどうすればいいですか？

div { 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 50px 
 
} 
 
.gases { 
 
    background-color: limegreen; 
 
} 
 
.blocks {} .border { 
 
    border: 5px solid black; 
 
}

<div class="border"> 
 
    <div class="periodOne groupOne gases blocks" id="hydrogen"> 
 
    <p>H</p> 
 
    </div> 
 
</div>

出典

2016-10-09 Jake_the_camper

P追加{マージン：0;}あなたのCSSに – Bosc

あなたpタグにいくつかmarginセットはおそらくあります。次のCSS行を追加して余白を削除してみてください。

.border p {margin: 0;}

JSFiddle：ユーザー・エージェント・スタイルシートでhttps://jsfiddle.net/5w6jt0ru/1/

出典

2016-10-09 01:42:39 heyitsjhu

これは聞いて –

は素晴らしいそれを修正ありがとうございました！これを正しいものとしてマークして、今後同様の問題に遭遇する他の人がこれを参照できるようにしてください。 – heyitsjhu

、elementはデフォルトmargin-topとmargin-bottomを持って、あなたはそれらを削除する必要があります。

div { 
 
    height:50px; 
 
    width:50px; 
 
    text-align:center; 
 
    font-size: 30px; 
 
    line-height:50px 
 
} 
 
.gases { 
 
    background-color:limegreen; 
 
} 
 
.border{ 
 
    border:5px solid black; 
 
    box-sizing:border-box; 
 
} 
 

 
.border p{ 
 
    margin: 0; 
 
} 
 
<!-- remove p element default margin-top and margin-bottom -->

<body> 
 
    <div class="border"> 
 
    <div class="periodOne groupOne gases blocks" id="hydrogen"> 
 
    <p>H</p> 
 
    </div> 
 
    </div> 
 
</body>

出典

2016-10-09 01:45:52 ColorWin

.border { display: inline-block} 
 
.blocks { 
 
    height: 50px; 
 
    width: 50px; 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 50px; 
 
    
 
} 
 
.gases { 
 
    background-color: limegreen; 
 
} 
 
.blocks {} .border { 
 
    border: 5px solid black; 
 
} 
 
p {margin: 0}

<div class="border"> 
 
    <div class="periodOne groupOne gases blocks" id="hydrogen"> 
 
    <p>H</p> 
 
    </div> 
 
</div>

出典

2016-10-09 01:58:28

（余分なマージンが発生する）pタグを削除するには、2つのdivのために別々のルールにdivルールを分離し、のようなものを使用するように注意してくださいline-heightなどこれらの要素のみ。ここでは、コードがあります：

.a { 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
.b { 
 
    text-align: center; 
 
    font-size: 30px; 
 
    line-height: 50px 
 
} 
 
.gases { 
 
    background-color: limegreen; 
 
} 
 
.border { 
 
    border: 5px solid black; 
 
}

<div class="a border"> 
 
    <div class="b periodOne groupOne gases blocks" id="hydrogen"> 
 
    H 
 
    </div> 
 
</div>

出典

2016-10-09 01:58:51 Johannes

私の国境の内側にdivタグを取得するにはどうすればいいですか？

答えて

関連する問題