チェックのために*{border:solid 1px red;}をいれるとレイアウトが変わってしまう

Question

数日前から勉強をはじめたばかりの初心者で、いま練習でtopページを作っているところです。
添付の画像のように、メイン画像の下にいれたdivの中で背景画像を設定しているのですが、メイン画像と背景画像の間に隙間ができてしまい、困っていました。

そこで、ネット情報を頼りに勉強している中で、誰かが*{border:solid 1px red;}をいれると要素がどうなっているのか目に見えるのでわかりやすいよ、と書かれていたのを参考に、

*{border:solid 1px red;}

を入れてチェックしていたのですが、それを適用しているときと、適用していないときで、レイアウトが変わってしまうのです。
変わっているのは*{border:solid 1px red;}を挿入したかしないかだけで、他の部分を見直しても一切変わっていません。何度も挿入したり削除したりを繰り返してみましたが、何度やり直しても同じでした。

初歩的な質問で大変申し訳ないのですが、*{border:solid 1px red;}をいれるとレイアウトが変わってしまうのは何故でしょうか？
ご教授の程よろしくお願い致します。

Answer 1

*{border:solid 1px red;}をいれるとレイアウトが変わってしまうのは何故でしょうか？

いくつか要因が考えられます。

• 線自体の幅（1pxずれただけでも、段組が崩れるなどは発生します）
• マージンの相殺がされなくなる（borderがない場合とある場合で、marginの処理が違ってきます）

Comments

[works_noname]

ご回答ありがとうございます。
線1pxで段組が崩れるものなのですね。marginの処理が違ってしまうのも初耳です。
勉強になりました、ありがとうございます。

ちなみに、以下は図々しい内容ですので、全くの無視でもかまわないのですが、以下のコードの場合、どこが原因で隙間があいたり、レイアウトが変わってしまうのでしょうか？
その他、何かご指摘ございましたら、色々教えていただけますと幸いです。
本文へのコードの追加の可不可がわからないので、こちらで失礼致します。
本当に無視でも結構です。すみません。

●HTML
<p class="topimage"><img src="略.jpg" width=100%></p>

<div class="background">
　<div class="contents">
<h1 class="title">略</h1><br>
　　　　　<p>文章</p>
　　</div>
</div>

●css
.topimage{
text-algin:center;
padding-top:70px;　←ヘッダーにかぶるので
margin:0px;
vertical-align:bottom;　←画像下の余白をなくしたくてコピペ
line-heignt:1.0em;　←画像下の余白をなくしたくてコピペ
}

.background{
background-image:url("略.jpg”);
background-color:#fff;
background-size:cover;
}

.contents{
margin:60px 20px 0px 30px;
font-family:略;
font-weight:500;
font-size:16px;
line-height:28px;
letter-spacing:0.1em;
}

.title{
margin:-5px 0px 5px -20px;
font-size:40px;
color:#2f4f4f;
}

[works_noname]

※topimage→メイン画像
※×　algin→○　align

[maisumakun]

元の状態では、.contentsのmarginが.backgroundの外まではみ出しますが、.backgroundにborderを引くと、.contentsのmarginは.backgroundの内側に取られるようになります。

[works_noname]

ご丁寧にありがとうございます！
.cotentsのmarginの60pxを0pxにしたら、隙間がなくなりました！
①.contentsのmarginを0pxに
②padding:50pｘ;を追加
③HTMLの方の</p>の前の<br>をひとつ分減らす
という方法で、とりあえず見た目は思った通りになりましたが、対処方としてはこれで良いでしょうか？

[maisumakun]

> 対処方としてはこれで良いでしょうか？

もともとどうレイアウトするのが正解なのか知らない以上、わかりません。

[works_noname]

そうですよね、すみません。
質問時にあげさせていただいた画像のレイアウトで、隙間がなくなればそれで良かったのですが、周りに聞ける人がいない為、つい甘えてしまいました。お時間を割いていただき申し訳ないです。
paddingとmarginをよりしっかり、また勉強していきたいと思います。
大変助かりました。ありがとうございます！

Answer 2

outline なら影響が少ないかも。

【outline - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/outline

Comments

[works_noname]

ご回答ありがとうございます。ご返信遅くなり、申し訳ございません。
今回の件に関しては、outlineにしてもやはり隙間は空くようでした。他のご回答者様が教えてくださったのですが、文章(h要素とp要素を包括している)に設定したmarginが影響して、隙間になっていたようです。
試してみましたら、outlineは線がすっきりして見やすいですね。次回から、outlineも使っていきたいと思います。
参考URLも載せていただき、大変丁寧なご回答を誠にありがとうございます。

Answer 3

widthなどにボーダー分も含める場合、box-sizing: border-box;を指定します。
確認用の*{border:solid 1px red;}を、*{border:solid 1px red;box-sizing: border-box;}にしてみてください。

Comments

[works_noname]

ご回答ありがとうございます。
コピペして試してみましたが、やはりレイアウト変わってしまうみたいです……。