Web前端--CSS中margin和padding的区别

时间：2018-05-30 19:14:06 阅读：484 评论：0 收藏：0 [点我收藏+]

标签：padding 图片 TE htm test eee 行内元素 doctype 边框

pdding是内边距，是盒子的边与盒子内部元素的距离;margin是盒子的外边距，即盒子与盒子之间的距离

padding说明：

检索或设置对象四边的内部边距。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>padding_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test {
    float: left;
    padding: 10px;
    border: 1px solid #000;
}
</style>
</head>
<body>
<div class="test">注意我离4条边框线的距离</div>
</body>
</html>

页面展示效果（内容到边框的距离）：

技术分享图片

margin说明：

检索或设置对象四边的外延边距。

如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。
如果只提供一个，将用于全部的四边。
如果提供两个，第一个用于上、下，第二个用于左、右。
如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的外补丁；若要设置上、下两边的外补丁，必须先使该对象表现为块级或内联块级。
外延边距始终透明。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>margin_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{margin:20px;background:#eee;}
</style>
</head>
<body>
<div class="test">注意我距上、右、下、左的距离</div>
</body>
</html>

页面展示效果（内边框到外边框的距离）：

css参考手册：

http://www.css88.com/book/css/

Web前端--CSS中margin和padding的区别

标签：padding 图片 TE htm test eee 行内元素 doctype 边框

原文地址：https://www.cnblogs.com/brownyangyang/p/9112428.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行