paddingを含めた親に対する子の絶対位置指定のズレ

よろしくお願いします。

OS:macOS Catalina
Webブラウザ:Firefox

html
1
2<!DOCTYPE html>
3<html lang="ja">
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Single</title>
8  <link rel="stylesheet" href="css/style.css">
9</head>
10<body>
11
12<section class="skills">
13  <div class="box">
14    <p class="test1">test1</p>
15    <p class="test2">test2</p>
16    <p class="test3">test3</p>
17  </div>
18</section>
19
20</body>
21</html>
22
23

style
1
2@charset "UTF-8";
3
4html {
5  font-size: 62.5%;
6}
7
8body {
9  text-align: center;
10}
11
12*,
13*::before,
14*::after {
15  box-sizing: border-box;
16}
17
18.skills {
19  background-color: #fff;
20  height: 700px;
21  width: 100%;
22  border: 5px solid greenyellow;
23}
24
25.box {
26  width: 30%;
27  margin: 0 auto;
28  position: relative;
29  padding: 30px;
30}
31
32.test1 {
33  margin: 20px auto 0;
34  font-size: 4rem;
35  width: 100%;
36  border: 2px solid #000;
37  padding: 100px 20px;
38  color: #000;
39}
40
41.test2 {
42  margin: 0 auto;
43  width: 100%;
44  font-size: 4rem;
45  border: 2px solid #000;
46  padding: 100px 20px;
47  color: #000;
48}
49
50.test3 {
51  margin: 0;
52  position: absolute;
53  font-size: 4rem;
54  width: 100%;
55  height: 50%;
56  background-color: red;
57  top: 50%;
58  color: #000;
59  opacity: 0.8;
60}
61
62

上記において疑問点は２つありまして、.boxにpadding:30pxを挿れない場合は
絶対位置指定した.test3は.test2のブロック内にピタリと収まります。

paddingを入れてしまった場合、

上記のようにレイアウトが崩れます。

親要素の.boxにpaddingを挿れても子要素の.test3で絶対位置指定した場合は.boxのpaddingを無視した左上からtop,left等で調整すると思っていたのですが、どのような状態かわかりませんでした。

left:0に指定して左にピタリとくっついているのを見ると親のpaddingでの30pxのぶんは無視して解釈してくれていそうなのですが...

またposition:absoluteにしたことで例外的に祖先要素に高さ指定していなくてもheight50%は適応になるようですが、なぜ高さや幅に関してボックスを逸脱してしまうのでしょうか。

padding指定がなければしっかり収まりきるのですが原因がわかりません。

またもう一点の疑問が.test3にてmargin:0を指定しておりますが、この指定と先ほどの親要素へのpaddingがない場合は以下

このように.test3の上下にmarginが40pxほど入ってしまいます。これは
reset.cssなどでデフォルトの設定を切っていないため発生してしまっているのでしょうか。

言葉足らずかもしれませんが、アドバイスいただけますと幸いです。

行動規範の内容に同意します

回答1件

たぶん検証をミスっているか勘違いされていると思われます。

親要素の.boxにpaddingを挿れても子要素の.test3で絶対位置指定した場合は.boxのpaddingを無視した左上からtop,left等で調整すると思っていたのですが、どのような状態かわかりませんでした。

left:0に指定して左にピタリとくっついているのを見ると親のpaddingでの30pxのぶんは無視して解釈してくれていそうなのですが...

test3にleft:0;をもう一度当ててみてください。
以下の画像のように左にはみ出るかと思います。

またもう一点の疑問が.test3にてmargin:0を指定しておりますが、この指定と先ほどの親要素へのpaddingがない場合は以下(質問者添付画像が入る)このように.test3の上下にmarginが40pxほど入ってしまいます。これは

reset.cssなどでデフォルトの設定を切っていないため発生してしまっているのでしょうか。

その認識で大丈夫です、ブラウザのデフォルトスタイルになります。

これはchromeですが、pタグの上下にmarginが入ります。

またposition:absoluteにしたことで例外的に祖先要素に高さ指定していなくてもheight50%は適応になるようですが、なぜ高さや幅に関してボックスを逸脱してしまうのでしょうか。

飛ばしてしまったこれなんですが、回答の初めのleft:0;をお試しいただき、
また、ブラウザのデフォルトスタイルをリセットした上で、
まだ疑問に思われるようでしたらおたずねくださいませ。

投稿2021/03/07 02:03

退会済みユーザー

総合スコア0

F.Drake

2021/03/07 10:21

ご回答ありがとうございます！おっしゃられるようにleft:0を当てましたら左にはみ出てデベロッパーで確認したところ、paddingを除外した本来の.boxの左端にくっつきました。一点ご質問あのですが、もしも.boxの左右paddingを加味した空間に赤い背景色を当てはめたい場合、left,rightに30px筒入れれば良いのかと思ったのですが、その場合先ほどと同じような状態に戻ってしまいました。うまい具合にpadding分も加味して背景色を閉じ込めたい場合はどうするのが適切なのでしょうか。質問多く恐縮ですがご意見いただけますと幸いです、。

退会済みユーザー

2021/03/07 11:19 編集

test3のwidthにCSSで使える計算用の記述をすると一応ぴったりになります。 `width: calc(100% - 60px);`※100％の幅から左右30pxを引くので-60px 以下蛇足です。一応と書いたのは検証ツールだと375px～3760pxまではぴったりだったのですが、 374px以下になるとCSSの当たり方が変わってくるのか少しずつ狭くなってしまう為です。もし374px以下のスマホでもぴったりが良いときは、 `メディアクエリ`というものを指定して374px以下の幅の端末用のCSSを記述してあげる必要があるかもしれません。 ※検証ツールと実機では動作が異なることが多いため、実際に試さないと分からず断言できません。

行動規範の内容に同意します