margin和padding的使用

2024-04-26 11:25:25

一、margin外边距

元素周围生成额外的空白区，“空白区”通常是指其他元素不能出现且父元素背景可见的区域。

二、padding内边距

称呼为内边距，其判断的依据即边框离内容正文的距离。

padding的用法大体上来说，与margin略有不同，但是在距离设定上一致。

三、margin和padding的使用区别

margin和padding在许多地方往往效果都是一模一样，而且你也不能说这个一定得用margin那个一定要用padding，因为实际的效果都一样，你说margin用起来好他说padding用起来会更好，但往往争论无果。根据网上的总结归纳大致发现这几条还是比较靠谱的：

何时应当使用margin：

需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。

如15px+20px的margin，将得到20px的空白。

何时应当时用padding：

需要在border内测添加空白时。空白处需要背景（色）时。上下相连的两个盒子之间的空白，希望等于两者之和时。

如15px + 20px的padding，将得到35px的空白。

我们先不设置内边距和外边距为0，效果如下，很明显距离上面和左边都留出了空白。

这是我们设置完内边距和外边距为0之后，就清除了左边和上面的留白。

margin和padding的使用相关推荐

何时使用margin和padding？
margin和padding的意义相信大家都很清楚,可是在具体应用中,到底应该使用哪一个,就比较难于判断了. 这篇文章说得挺清楚的,在这里翻译一下,供参考. 何时应当使用margin 需要在bord ...
margin和padding
在制作网页中,margin和padding的使用是必不可少的,在这里,我截了一张图. 在这张图中, 内部的蓝色区域是内容的区域, 再往外的绿色框是内填充,就是我们所说的padding, 往外有点浅黄色 ...
android 动态设置padding,Android动态设置控件大小以及设定margin以及padding值
http://www.aichengxu.com/Java/73893.htm Android动态设置控件大小以及设定margin以及padding值,有需要的朋友可以参考下. 一.概述在andro ...
为什么css一开始需要设定margin和padding为 0px?
我们在写HTML的时候,通常会在样式里先写上一些像body.a.ul li等这些标签的全局的一些样式.之所以有这样的习惯,主要是是因为以下几点: 首先:浏览器兼容.我们做的网页是给用户看的,我们只负责 ...
【margin和padding的区别】
margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离.(外边距) padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离.(内 ...
CSS样式表margin和padding的区别
用css时,首先要做的是把所有的标签margin和padding都清空.这样更容易控制浏览器的布局和兼容浏览器. 清空方法:*{margin:0; padding:0;} *是通配 ...
margin和padding分别适合什么场景使用？
margin: 需要在border外侧添加空白时:空白处不需要背景(色)时:上下相连的两个盒子之间的空白,需要相互抵消时. padding: 需要在border内测添加空白时:空白处需要背景(色)时: ...
margin 和 padding 的使用区别
1.平面图 2.立体图 3.margin 外边距元素周围生成额外的空白区."空白区"通常是指其他元素不能出现且父元素背景可见的区域. 关于外边界距离的设定,规则如下: /*四周相 ...
CSS中margin和padding的区别
padding.margin都是边距的含义,关键问题得明白是什么相对什么的边距.padding是控件的内容相对控件的边缘的边距,margin是控件边缘相对父空间的边距. 在CSS中margin是指从自 ...
[css] margin和padding使用的场景有哪些？
[css] margin和padding使用的场景有哪些? 实现自适应的等比例矩形效果: div { padding: 50%; } div { padding: 25% 50%; } //宽高比为 ...

最新文章

热门文章