CSSファイルのボックスの計算について

Question

@charset "UTF-8";

.sample p{
width: 500px;
padding: 5px;
border: 5px solid #eee;
margin: 10px;
}

CSSの勉強をしているのですが、教材によると、この場合のボックスの計算は

500px+(5px2)+(5px2)+(10px*2)=540px

であるとのことです。

この時の
paddingと
borderと
marginの×２の部分がよく理解できません。

paddingなどの余白は全部で４辺なので、×４ではないのでしょうか。

回答よろしくお願いいたします。

Answer 1

余白は全部で４辺なので、×４ではないのでしょうか

単純に幅の話ですから左右にそれぞれということです

Comments

[yambejp]

ちなみにcssには
width: 500px;
と書いてあるので全体は540ですね
p自体は520で外側に左右10ずつです

[yuzuru3270]

これは幅の話なんですね！理解しました、ありがとうございます！
誤字訂正しました。