margin、padding、border
(一)含义与原理
margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离。
padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。
border指边框
(1)平面层次关系
(2)3d图嵌套更清晰
(2)f12观察相邻关系
可以根据对应色块观察理解。 橙色是外页距,绿内页距,蓝色是内容,三者不重叠,暂无边框。
(二)参数关系
老是记不住。。
一个 | 上下左右 |
两个 | 上下,左右 |
三个 | 上,左右,下 |
四个 | 上,下,左,右 |
body { padding: 36px;} //对象四边的补丁边距均为36px
body { padding: 36px 24px; } //上下两边的补丁边距为36px,左右两边的补丁边距为24px
body { padding: 36px 24px 18px; } //上、下两边的补丁边距分别为36px、18px,左右两边的补丁边距为24px
body { padding: 36px 24px 18px 12px; } //上、右、下、左补丁边距分别为36px、24px、18px、12px
(三) margin 和 padding 的用法
兄弟元素用margin,父子元素用paddiing
margin的用法说明:
(1)需要在border外侧添加空白时,
(2)空白处不需要有背景(色)时,
(3)上下相连的两个盒子之间的空白需要相互抵消时,比如15px+20px的margin,将得到20px的空白。
padding的用法说明:
(1)需要在border内侧添加空白时(往往是文字与边框距离的设置),
(2)空白处需要背景(色)时,
(3)上下相连的两个盒子之间的空白希望等于两者之和时,比如15px+20px的padding,将得到35px的空白。
掌握了原理还是会有无穷无尽的bug,遇到了再说,加油!
margin、padding、border相关推荐
- 步骤带图详细解释margin、padding、border、content
```````````````````````````````````````````````````````````````````````````````````````````````````` ...
- CSS盒子模型(border、padding、margin、圆角边框、盒子阴影、文字阴影、新闻列表综合案例、新浪导航栏案例)
1. 网页布局的本质 首先利用CSS设置好盒子的大小,然后摆放盒子的位置. 最后把网页元素比如文字图片等等,放入盒子里面. 以上两步 就是网页布局的本质 2. 盒子模型(Box Model) 盒子模型 ...
- CSS 盒子模型(border、padding、margin)
CSS盒子模型 Css盒子模型本质上是一个盒子,封装周围的html元素,他包括边框.内容.外边距.内边距. 1.边框 边框(border)可以设置元素的边框,他由三部分组成:边框宽度(粗细).边框样式 ...
- 一天搞定CSS:盒模型content、padding、border、margin--06
1.盒模型 网页设计中常听的属性名:内容(content).填充(padding).边框(border).边界(margin), CSS盒子模式都具备这些属性.这些属性我们可以用日常生活中的常见事物- ...
- 前端:margin、padding、float一篇文章彻底理解
系列文章目录 文章目录 系列文章目录 margin -- 意思是 边距 margin的4个取值 padding -- 意思是填充 float -- 意思是浮动 总结 -- 这些玩意要自己敲一下,然后去 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- CSS 中 的 margin、border、padding 区别 (内边距、外边距)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一 ...
- CSS中的margin、border、padding区别 CSS padding margin border属性详解
图解CSS padding.margin.border属性 W3C组织建议把所有网页上的对像都放在一个盒(box)中,设计师可以通过创建定义来控制这个盒的属性,这些对像包括段落.列表.标题.图片以及层 ...
- 从零开始学_JavaScript_系列(六)——CSS的padding、margin、border属性超详细解释(图文)...
结论请看最后的图片 关于定义: margin:层的边框以外留的空白 background-color:背景颜色 background-image:背景图片 padding:层的边框到层的内容之间的空白 ...
最新文章
- selection does not contain a main type错误
- Laravel5中Cookie的使用
- 《大话数据结构》读书笔记-串
- 看完你会为自己哭,或者为他们哭
- 【原创】大叔经验分享(27)linux服务器升级glibc故障恢复
- html免费天气预报代码,免费自我定制天气预报代码
- bzoj4390[Usaco2015 dec]Max Flow*
- Chrome插件GitZip(下载github项目中的部分文件)
- SUPL overview
- MySQL 解压版和安装版的安装
- 【六种解决思路尝试】VMware Workstation 无法连接到虚拟机。
- 微信小程序获取用户收货地址
- Linux实战(20):Docker部署EKL入门环境记录文档
- 谷歌中国大范围招兵买马:涉及销售和研发等多个部门
- python3斐波纳契数列
- 解决Please make sure you have the correct access rights and the repository exists 问题
- CTFHub-SSRF---(Post请求/上传文件/FastCGI/Redis/URL/数字IP/302跳转/DNS重绑定 Bypass)
- 802.11成帧封装实现(三)
- ORACLE EBS 请求日志打印工具-自动打印参数说明及参数值
- 帆软FCRP认证分享