CSS中margin和padding的区别

Question

如题所述

Answer 1

盒模型的外边距和内边距：

margin是对外的，padding是对内的。

margin    åœ¨ä¸€ä¸ªå£°æ˜Žä¸­è®¾ç½®æ‰€æœ‰å¤–边距属性。       

margin-bottom    è®¾ç½®å…ƒç´ çš„下外边距。

margin-left    è®¾ç½®å…ƒç´ çš„左外边距。

margin-right    è®¾ç½®å…ƒç´ çš„右外边距。

margin-top    è®¾ç½®å…ƒç´ çš„上外边距。    

2.margin样式的简写方式，padding同理：

例子 1

margin:10px 5px 15px 20px;

上外边距是 10px

右外边距是 5px

下外边距是 15px

左外边距是 20px

例子 2

margin:10px 5px 15px;

上外边距是 10px

右外边距和左外边距是 5px

下外边距是 15px

例子 3

margin:10px 5px;

上外边距和下外边距是 10px

右外边距和左外边距是 5px

例子 4

margin:10px;

所有 4 个外边距都是 10px

Answer 2

通俗地说——
padding 就是内容与边框的距离；
margin 就是边框与其他元素的距离。本回答被网友采纳

Answer 3

一、padding

1、语法结构

（1）padding-left:10px; 左内边距

（2）padding-right:10px; 右内边距

（3）padding-top:10px; 上内边距

（4）padding-bottom:10px; 下内边距

（5）padding：10px; 四边统一内边距

（6）padding:10px 20px; 上下、左右内边距

（7）padding:10px 20px 30px; 上、左右、下内边距

（8）padding:10px 20px 30px 40px; 上、右、下、左内边距

二、margin

1、语法结构

（1）margin-left:10px; 左外边距

（2）margin-right:10px; 右外边距

（3）margin-top:10px; 上外边距

（4）margin-bottom:10px; 下外边距

（5）margin:10px; 四边统一外边距

（6）margin:10px 20px; 上下、左右外边距

（7）margin:10px 20px 30px; 上、左右、下外边距

（8）margin:10px 20px 30px 40px; 上、右、下、左外边距