用 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 ...
随机推荐
- DataGridView数值列和日期列
本文转自:http://www.cnblogs.com/conexpress/p/5923324.html 在使用DataGridView编辑数据的时候,编辑的单元格一般会显示为文本框,逻辑值和图片会 ...
- 解锁 HTTPS原理
From今日头条:https://www.toutiao.com/a6534826865792647693/?tt_from=weixin&utm_campaign=client_share& ...
- Linux的简介安装与简单使用
一: 适合初学者的最佳Linux发行版:Linux Mint 老旧硬件的最佳Linux发行版:Ubuntu MATE 安全行业的最佳Linux发行版:Kali Linux 专属游戏的Linux发行版: ...
- Pycharm 修改项目名称后 中括号中出现先前名称怎么解决?
这时候,你打开工程的路径,会找到一个隐藏文件, .idea 目录删掉他,重新导入Pycharm 就行了. idea记录了一些工程项目信息. 步骤: 1.退出当前工程 2.打开工程路径删除.ideal ...
- AtCoder Beginner Contest 133 B - Good Distance
地址:https://atcoder.jp/contests/abc133/tasks/abc133_b 核心问题:判断一个浮点数开方是否为整数 ; double ans1=sqrt(ans); if ...
- vue-multi-tab--一个让你在SPA里使用多页签的框架页
介绍 vue-multi-tab 是一套基于 vue 和 element-ui 的 , 实现了 tab-router (一个基于 tab 的路由) 的 单页面, 多页签 应用程序. 我之前写这个项目的 ...
- SCUT - 365 - 鹏哥的数字集合 - wqs二分 - 斜率优化dp
https://scut.online/p/365 https://www.luogu.org/problemnew/solution/P2365 写这篇的时候还不是很明白,看一下这个东西. http ...
- P3452 [POI2007]BIU-Offices
传送门 首先能想到 $n^2$ 的做法 枚举所有两点,看看是否有边相连,如果没有说明它们一定要在同一集合,用并查集维护一下就行 注意到如果没有边这个条件,其实就相当于问补图有边 所以题意可以转化为,求 ...
- Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介)
原文:Elasticsearch7.X 入门学习第四课笔记---- Search API之(Request Body Search 和DSL简介) 版权声明:本文为博主原创文章,遵循CC 4.0 BY ...
- 超详细的DOM操作(增删改查)
操作DOM的核心就是增删改查 原文地址:https://jianshu.com/p/b0aa846f4dcc 目录 一.节点创建型API 1.1 createElement 1.2 createTex ...