css margin padding 0,CSS 彻底理解margin与padding

我们在刚开始接触CSS的时候总是被margin和padding闹的晕头转向，什么时候设置margin，什么时候设置padding，不是太清楚，设置了以后在界面上看到的效果也差不多呀。

如何理解margin与padding呀，我们首先可以想象一下我们手里拿了一个钻戒要向女朋友求婚，一般求婚的时候钻戒都是在盒子里放着呢，我们要有盒子的概念，钻戒一般都放在盒子的中央，没有哪家的钻戒是把盒子占的满满的，我们的钻戒就放在盒子的中央，占了很小的一块面积，其它的地方都是有填充物的，我们可以把这个填充物简单的理解为padding也就是钻戒距离盒子内边缘的距离，这时候我们想把钻戒放在桌子上，放在桌子的什么位置呢，左上角，右上角，还是中间，我们姑且把他放在中间把，那么我们这个钻戒盒子距离桌子边缘的距离就是margin，那么很简单我们那个钻戒的盒子就是我们所说的border。

钻戒.png

通过上面的图片我们就可以很直观的看出margin与padding的区别。

margin属性可以为给定元素设置所有四个(上下左右)方向的外边距属性。四个外边距属性设置分别是： margin-top， margin-right， margin-bottom 和 margin-left 。指定的外边距允许为负数。

1、指定一个值时该值指定四个边到父内边距的距离

margin: 100px;

marginPadding1.png

2、指定两个值时第一个值指定上下第二个指定左右

margin: 100px 20px;

margin2.png

3、指定三个值时第一个指定上边、第二个指定左右两边、第三个指定下边

margin: 100px 20px 10px;

margin3.png

4、指定四个值时分别为上右下左(顺时针顺序)

margin: 100px 20px 10px 50px;

margin4.png

padding属性设置一个元素的内边距，padding 区域指一个元素的内容和其边界之间的空间，该属性不能为负值。四个外边距属性设置分别是： padding-top， padding-right， padding-bottom 和 padding-left

1、指定一个值时该值指定内容到四个边的内边距

padding: 50px;

marginPadding1.png

2、指定两个值时第一个值指定内容到上下两边的内边距第二个指定内容到左右两边的内边距

padding: 50px 20px;

padding2.png

3、指定三个值时第一个指定内容到上边的内边距.第二个指定内容到左右两边第三个指定内容到下边的距离

padding: 50px 20px 10px;

padding3.png

4、指定四个值时分别为上右下左(顺时针顺序)

padding: 50px 20px 10px 5px;

padding4.png

以上的样式设定了这个控件的宽度为200px、高度为200px，在改变margin和padding时内容区的大小是不变的

css margin padding 0,CSS 彻底理解margin与padding相关推荐

CSS进阶（5）—— 深入理解margin
盒尺寸中padding负责内边距,一般情况下(抛开上一章的诡异现象)不会给使用者带来太多的麻烦,因此作者称之为温和的padding,而margin则有些激进,虽说负责外边距,但有时候还能做一些&quo ...
css margin为什么重叠,CSS 外边距(margin)重叠及防止方法
边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容.补白.边框)重合在一起而形成一个单一边界. 两个或多个块级盒子的垂直相邻边界会重合.结果的边界宽度是相邻边界宽度中最大 ...
css布局难,运用 CSS布局到底有多难?[多图]
找Bug 篇原始代码,未做修正: 运行代码框首页-牛腩新闻揭晓系统 /* /* * 建立人:牛腩 */ * { /* 把默认值都配置为0 */ margin:0; padding:0; bo ...
css基础 CSS 导航栏、CSS 下拉菜单
阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并添加边框全屏高度的固定导航条水平导航栏内联列表项浮动列表项水平导航条实例链接右对齐添加分割 ...
html css 矩形边框,html – CSS：在纯CSS箭头上创建边框
以下应该做你需要的 .multiply-button { display: table; background: rgba(0,0); border: none; color: white; padd ...
[css] 解释下为什么css的reset不建议直接这么写：*{ margin:0； padding:0；}？
[css] 解释下为什么css的reset不建议直接这么写:*{ margin:0; padding:0;}? 1.*为通配符,使用通配符,即全局范围遍历,耗费浏览器效率,增大负荷: 2.会影响后面的 ...
CSS 盒子模型（Box model）中的 padding 与 margin
编辑自 http://www.x6x8.com/IT/199.HTML 本文将讲述 HTML 和 CSS 的关键-盒子模型 (Box model) .理解 Box model 的关键便是 margin ...
html教程padding,HTML CSS——margin和padding的学习
一.什么是边距 CSS中的边距指的是当前元素border与周围其它元素border的距离(或者称为空间). 二.什么是内边距,什么是外边距代码2-1: html PUBLIC "-//W3 ...
css 奇淫技巧行内快父级padding 子级margin 抵消
学了这么久,其实都是在学css3 html5 然后js很薄弱,趁着有时间,更一个新手不懂的,且很好用的css. 行内快的padding在html布局中很常用,但是你知道父级的padding 子级可以通 ...

css margin padding 0,CSS 彻底理解margin与padding

css margin padding 0,CSS 彻底理解margin与padding相关推荐

最新文章

热门文章