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 对行内元素没有效果」这种说法也是不对的，因为它们只是对于没有设置背景色的行内非替换元素效果不可见而已，而对于行内替换元素来说，不管是否设置了背景色都是有效果了，并且会把父元素撑开。