用 margin 还是用 padding ?
边界(margin):元素周围生成额外的空白区。“空白区”通常是指其他元素不能出现且父元素背景可见的区域。
补白(padding):补白位于元素框的边界与内容区之间。很自然,用于影响这个区域的属性是padding。
——CSS权威指南
何时应当使用 margin ?
- 需要在border外侧添加空白时。
- 空白处不需要背景(色)时。
- 上下相连的两个盒子之间的空白,需要相互抵消时(如 15px + 20px 的 margin,将得到 20px 的空白)。
- margin 是用来隔开元素与元素的间距
- margin用于布局分开元素使元素与元素互不相干。
何时应当时用 padding ?
- 需要在border内测添加空白时。
- 空白处需要背景(色)时。
- 上下相连的两个盒子之间的空白,希望等于两者之和时(如 15px + 20px 的 padding,将得到 35px 的空白)。
- padding 是用来隔开元素与内容的间隔。
- padding 用于元素与内容之间的间隔,让内容(文字)与(包裹)元素之间有一段“呼吸距离”。
用 margin 还是用 padding ?的更多相关文章
- 用margin还是用padding
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. 分类: Html/CSS | 转载请注明: 出自 海玉的博客 本文地址: http://www.hicss.net/use ...
- 用Margin还是用Padding?(转载)
转载出自 海玉的博客 本文地址: http://www.hicss.net/use-margin-or-padding/ 用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. ...
- 通过margin负值去除padding
.pay-type { // 图片布局前通过margin负值去除padding margin: 0 -@page-padding-horizontal; display: inline-flex; } ...
- 用Margin还是用Padding?
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时 ...
- 用Margin还是用Padding的区别
用margin还是用padding这个问题是每个学习CSS进阶时的必经之路. CSS边距属性定义元素周围的空间.通过使用单独的属性,可以对上.右.下.左的外边距进行设置.也可以使用简写的外边距属性同时 ...
- 边框(border)边距(margin)和间隙(padding)属性的区别
边框属性(border):用来设定一个元素的边线.边距属性(margin):用来设置一个元素所占空间的边缘到相邻元素之间的距离.间隙属性(padding):用来设置元素内容到元素边界的距离.这三个属性 ...
- <span>和<a>的margin上下和padding上下不起作用的原因和解决
使用到了<span>和<a>标签,发现在样式里面直接写margin-top.margin-bottom和padding-top.padding-bottom都不起作用,页面样式 ...
- 不同浏览器的margin值与padding值
IE-7: 有默认外边距margin样式的元素: dd,menu, ol, ul, blockquote, body, dd, dl, form, h1-6, ul 有默认内边距padding样式的元 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- 用margin还是用padding?(3)—— 负margin实战
看过一篇文章是关于我知道你不知道的负Margin,里面对margin做了总结: 当margin四个值都为正数值的话,那么margin按照正常逻辑同周围元素产生边距.当元素margin的top和left ...
随机推荐
- YOLOV3中Darknet中cfg文件说明和理解
今天将要说明的是Darknet中的cfg文件,废话少说,直接干!(以cfg/yolov3.cfg为例,其它类似) [net] ★ [xxx]开始的行表示网 ...
- vue 组件传参
路由配好了 再传个参呗 注:组件信息流转的时候只能单向1 > 父子传参传参:通过属性prop:传递数据 a.父组件传参给子组件 子组件: <ul> <li v-for=&quo ...
- mooc-IDEA postfix--007
十三.IntelliJ IDEA -postfix 代码中输入: 总结常用的postfix: 1.for (<=>100.fori) 2.sout (<=>System.ou ...
- 2019寒假作业三:PTA7-1抓老鼠啊~亏了还是赚了
- 抓老鼠啊~亏了还是赚了? ( 分) 某地老鼠成灾,现悬赏抓老鼠,每抓到一只奖励10元,于是开始跟老鼠斗智斗勇:每天在墙角可选择以下三个操作:放置一个带有一块奶酪的捕鼠夹(T),或者放置一块奶酪(C ...
- SpringBoot(九) -- SpringBoot与数据访问
一.简介 对于数据访问层,无论是SQL还是NOSQL,Spring Boot默认采用整合Spring Data的方式进行统一处理,添加大量自动配置,屏蔽了很多设置.引入各种xxxTemplate,xx ...
- 旧接口注册LED字符驱动设备(动态映射)
#include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...
- Angular 组件通讯方式
(一)父子组件 输入/输出属性 关键词 Input,Output,EventEmitter. 父子组件信息信息,分为 (1)子组件向父组件传递 (2)父组件向子组件传递 (二)模版变量与 @V ...
- 《Cascaded Pyramid Network for Multi-Person Pose Estimation》论文阅读及复现笔记
一.PipeLine 要点 TopDown + GlobalNet + RefineNet 二.Motivation 通过提高对难以识别的关键点的识别准确率,来提升总体识别准确率. 方法:1.refi ...
- Flutter 初探 -
flutter 安装 经过许久的关注,及最近google算是真正地推行flutter时,加上掘金小册也有相应的教程,我知道自己得跟着这一波潮流学习了,不然迟早会面临着小程序的危(大家都会了就你不会), ...
- 提升JAVA代码的好“味道”
让代码性能更高 需要 Map 的主键和取值时,应该迭代 entrySet() 当循环中只需要 Map 的主键时,迭代 keySet() 是正确的.但是,当需要主键和取值时,迭代 entrySet() ...