Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.

Use the box-sizing property to keep the width at 300px, no matter the amount of padding

若div設定width 和 height,只設定了文字的面積,總物件大小需再加上padding, borders 和 margins。

若要固定物件大小,需設 box-sizing: border-box; 如此能無視padding的大小。

https://www.w3schools.com/css/css_boxmodel.asp

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

只會在上下margin發生,兩物件距離是其中最大的margin。

小宥

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store