margin和padding的使用
一、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%; } //宽高比为 ...
最新文章
- 太阳系“首个星际访客”未被探测到人工信号
- python实现自动发送微博,当自己写博客时同步上去。
- VS Code 的常用快捷键和插件
- php 调用变量方法名,php中引用(变量和函数名前加符号)用法
- Redis学习笔记五:独立功能之事务
- upload Fiori application to ABAP server via report /UI5/UI5_REPOSITORY_LOAD
- 设计模式---4(抽象工厂模式的概念,产品组和产品等级的概念,抽象工厂模式的实现)
- Angular2+ typescript 项目里面用require
- docker build 中的上下文路径
- java向上和向下的区别_Java的向上和向下转型
- 2018暑期周总结报告(四)
- Discuz!ML 3.x任意代码执行漏洞
- 金仓数据库KingbaseES与Oracle大对象类型之间的区别
- MySQL 打开视图 1449_Mysql查询视图:ERROR 1449 (HY000)解决办法
- Mars 开源月报(2020.3)
- UVALive 7456	Least Crucial Node (并查集)
- java happen-before_java 内存模型中的happen-before 是什么?
- Java类有个星号标记_Java中import包带*(星号)问题
- 国家、广东省、深圳市的“智能机器人”扶持政策汇总
- 【M语言编程学习笔记之一, 查找当前路径下文件】
热门文章
- 新年新气象,接个私活赚点生活费?说说这里的弯弯绕
- 天玑1000+和骁龙865哪个好-天玑1000+和骁龙865跑分对比
- 揭秘了!双十一手机真的优惠吗?我爬取了京东近3000部手机,深度分析!
- lol手游s2服务器维护时间,lol手游s2赛季什么时候结束 赛季结束时间一览
- 华为手机adbshell卸载不需要的系统应用
- 知乎高赞:前端模块化的十年征程
- 海尔银悦扫地机器人怎样规划_海尔扫地机器人怎么样?海尔扫地机器人哪款好?...
- 数字化转型案例:基于EdgeX和OpenVINO的数智化生产车间管理系统
- 入行半导体之ATE测试
- 丁达尔效应产生的原因_为什么丁达尔效应产生的通路是乳白色的?