【至急】 コーダー・webデザイナーさんに質問です！ Webデザイナー検定(CG-ARTs)の質問です。 この問題、選…

Question

【至急】
コーダー・webデザイナーさんに質問です！

Webデザイナー検定(CG-ARTs)の質問です。
この問題、選択肢に答えがないように思うのですが、
解説お願いします。ちなみにこの問題の答えは「ウ」でした。

正解でしたがなんだか納得できないので
解説できる方がいればご教授願いたいです。
お願いします！

【雑談】
グラフィックデザイナーなのにこんなの受けろって
会社から言われて受けてみることに。
コーディングをするにはやや知識不十分な気もするし
デザイナーも実務でこんなことせんし、
なんのために勉強してるんや▶︎
((((合格したらお金貰えるから)))))

※問題集・教科書は代々受け継がれてきた古物です。

画像見えにくかったら問題文↓

d. CSSではHTML文書に記述されだブロックレベル要素ボッグスに対して、幅や高さのほか、マージンやパディング、ボーダー（枠線）を指定することができる。つぎのCSS文書の記述のうち、ボーダーを含むボックスの横幅が300pxとなるのはどれか.

【解答群】
ア.
div {
margin: 10px;
padding: 10px;
width: 285px;
border: 5px solid #000000;
}

イ.
div {
margin: 10px;
padding: 10px;
width: 275px;
border: 5px solid #000000;
｝

ウ.
div }
margin: 10px;
padding: 10px;
width: 270px;
border: 5px solid #000000;
}

エ.
div }
margin: 10px;
padding: 20px;
width: 270px;
border: 10px solid #000000;
}

【私の考察】
マージン パディング ボーダーも
それぞれ左右10と考えて合計
マージン20px
パディング 20px
ボーダー 10px
なので width 250があればそれが正解だと思うのですが、
ないので正解は沈黙ということでおけ？(^q^)

Answer 1

おちょんさん

>････つぎのCSS文書の記述のうち、ボーダーを含むボックスの横幅が300pxとなるのはどれか.･･･････

そもそも、margin は、box の外の話。
box に含めてはいけません。

ご参考に↓
https://saruwakakun.com/html-css/basic/margin-padding
https://www.tohoho-web.com/css/prop/box-sizing.htm

Answer 2

マージンはボーダーの外側につくので、この問題の答えには含まれません。

ウの回答は幅方向で
border 5px
padding 10px
width 270px
padding 10px
border 5px
となり、合計300pxとなります。

Answer 3

marginはborderの外側にかかります。問題文が聞いているのは「borderで見える幅」はので、無視しなければなりません。