margin(外邊距)和padding(填充)

margin:25px 50px 75px 100px;

• 上邊距爲25px
• 右邊距爲50px
• 下邊距爲75px
• 左邊距爲100px

margin:25px 50px 75px;

• 上邊距爲25px
• 左右邊距爲50px
• 下邊距爲75px

margin:25px 50px;

• 上下邊距爲25px
• 左右邊距爲50px

margin:25px;

• 全部的4個邊距都是25px

除了表格顯示類型爲table-caption, table and inline-table的元素都支持margin。

margin-top 和margin-bottom:對非替換行內元素無效果。如a和span，而img是一個行內元素，margin-top和margin-bottom對它是有效果的，由於它是一個替換元素而不是非替換元素，因此對於「 margin-top 和 margin-bottom 對行內元素沒有效果」這種說法是不對的。

padding:25px 50px 75px 100px;

• 上填充爲25px
• 右填充爲50px
• 下填充爲75px
• 左填充爲100px

padding:25px 50px 75px;

• 上填充爲25px
• 左右填充爲50px
• 下填充爲75px

padding:25px 50px;

• 上下填充爲25px
• 左右填充爲50px

padding:25px;

• 全部的填充都是25p

 

除了表格顯示類型爲 table-row-group、 table-header-group、 table-footer-group、 table-row, table-column-group 和 table-column 的元素都支持padding。

因此對於「 padding-top 和 padding-bottom 對行內元素沒有效果」這種說法也是不對的，由於它們只是對於沒有設置背景色的行內非替換元素效果不可見而已，而對於行內替換元素來講，不論是否設置了背景色都是有效果了，而且會把父元素撐開。