设置元素内边距padding

所有的 HTML 元素基本都是以矩形为基础。
每个 HTML 元素周围的矩形空间由三个重要的属性来控制：
padding（内边距）：它围绕着内容的空间。
margin（外边距）：它围绕元素外部的空间。
border（边框）：它紧接着内边距的线。
padding控制着元素内容与border之间的空隙大小。

我们可以看到蓝色盒子和红色盒子都在黄色盒子里面。
红色盒子比蓝色盒子有着更多的padding填充空间。
当你增加蓝色盒子的padding值，文本内容与边框的距离会逐渐拉大。

设置元素外边距margin

margin（外边距）属性控制元素的边框与其他元素之间的距离。
注意：
①红色盒子的margin值要比蓝色盒子的大，让它看起来比蓝色盒子要小。
②当你增加蓝色的margin值，它会增加元素边框到其他周围元素的距离。

设置元素负外边距

margin 清除周围的（外边框）元素区域。margin 没有背景颜色，是完全透明的。
margin 可以单独改变元素的上，下，左，右边距，也可以一次改变所有的属性。
注意：如果你设置元素margin为负值，元素会变得更大。

使用padding给元素添加不同的外边距

CSS 允许你使用padding-top，padding-right， padding-bottom和padding-left属性来设置四个不同方向的padding值
不需要每次都要分别声明 padding-top，padding-right，padding-bottom和padding-left属性，也可以把它们汇总在padding属性里面声明，如下：
注意：四值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。

使用margin给元素添加不同的外边距

CSS 允许你使用margin-top，margin-right，margin-bottom和margin-left属性来设置四个不同方向的margin值。
同样，每个方向的外边距值可以在margin属性里面汇总声明，
来代替分别声明margin-top，margin-right，margin-bottom和margin-left属性的方式：

特殊： margin: 0 auto; —— 为 margin 或 padding 等属性设置两个值，第一个值代表元素的上、下方向（本例设置为 0）；第二个值代表左、右两边（本例中的auto是特殊值，含义是水平方向左右对称）。

CSS设置元素内边距（padding）、外边距（margin）相关推荐

css内边距与外边距的区别
你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素.内联元素中的区别?什么时候该用 padding而不是margin?你知道负margin吗?你 ...
CSS内边距和外边距
内边距: 边框于内容之间的距离. 外边距:边框于边框之间的距离. CSS 内边距属性属性描述 padding 简写属性.作用是在一个声明中设置元素的所内边距属性. padding-bottom 设 ...
java中内边距跟外边距,padding和margin——内边距和外边距
一.padding--内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. div.outer{ width: 400px; height: 400 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定 ...
Css内边距与外边距
Css内边距与外边距 Css内边距 Css外边距margin Css外边距margin 设置外边距最简单的方法就是margin属性.margin属性接受任何长度单位,可以是像素,英寸,毫米或em ma ...
盒子模型/设置边框/内边距、外边距
盒子模型在HTML中,浏览器在解析每一个标签元素时,都会将标签解析成一个装东西的盒子,超文本标记语言中,内容本身就定义在标签内部的.它将标签解析一个一个盒子,盒子之间存在间距,盒子内部装的东西与盒子 ...
CSS基础(part12)--盒子模型之外边距
学习笔记,仅供参考,有错必纠参考自:某不知名网课文章目录盒子模型外边距属性设置块级盒子水平居中文字居中以及盒子居中插入图片和背景图片的区别清除元素的默认内外边距外边距合并(只存在垂 ...
七天学会h5和css3之盒子模型内边距和外边距（27）
先来练习一个题目:做一个新浪体育文本页面.,可能你现在并不能很好的做出这个效果,但是学习了本节后,你将很快的做出这个页面,具体代码和效果如下: <!DOCTYPE html PUBLIC &qu ...

CSS设置元素内边距（padding）、外边距（margin）