CSS内边距和外边距
内边距: 边框于内容之间的距离。
外边距:边框于边框之间的距离。
CSS 内边距属性
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
CSS 外边距属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
以上概念内容赖在w3cschool,具体的设置需要自己编写实例来验证
CSS内边距和外边距相关推荐
- Css内边距与外边距
Css内边距与外边距 Css内边距 Css外边距margin Css外边距margin 设置外边距最简单的方法就是margin属性.margin属性接受任何长度单位,可以是像素,英寸,毫米或em ma ...
- Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框、内边距、外边距
前言 持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍 盒子的概念 页面中的每一个标签,都可看做是一个 "盒子&qu ...
- CSS 之盒子模型——边框、内边距、外边距
使用width来设置盒子内容区的宽度 使用height来设置盒子内容区的高度 width和height只是设置的盒子内容区的大小,而不是盒子的整个大小,盒子可见框的大小由内容区,内边距和边框共同决定 ...
- 【温故知新】CSS学习笔记(外边距合并)
CSS外边距合并 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并. 一.相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇的时候,如果上面的元素有下外边距margin ...
- java中内边距跟外边距,padding和margin——内边距和外边距
一.padding--内边距(内填充) 1.1.padding 简写属性在一个声明中设置所有填充属性.该属性可以有1到4个值. div.outer{ width: 400px; height: 400 ...
- 七天学会h5和css3之盒子模型内边距和外边距(27)
先来练习一个题目:做一个新浪体育文本页面.,可能你现在并不能很好的做出这个效果,但是学习了本节后,你将很快的做出这个页面,具体代码和效果如下: <!DOCTYPE html PUBLIC &qu ...
- 清除默认的内边距与外边距
现象 默认浏览器会有8象素的内外边距 解决 使用通用选择器设置 内边距,外边距 都给值为0
- 内边距和外边距,清除默认的内外边距
内边距(padding)--边框与内容之间的距离 padding-left 左内边距 padding-right 右内边距 padding-top 上内边距 padding-bottom 下内边距 p ...
- 外边距塌陷/外边距合并
外边距合并 外边距合并一般发生在兄弟元素之间.简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距.合并后的外边距的高度等于:若两个外边距为两正,取较大者,若两个外边距一正一负,取 ...
最新文章
- Plugin with id 'com.novoda.bintray-release' not found的解决方法
- tomcat结构分析
- Java应用中使用ShutdownHook友好地清理现场(转)
- Springboot之多环境打包配置
- LINQ能不能用系列(二)LINQ to SQL 效率比对
- apache2.2.15与PHP5.3.3安装设置完成后,apache启动失败
- Java实验3 方法与数组
- mysql搜索结果去重_MySQL去除查询结果重复
- Android一些关于分辨率和布局的设置
- NoSQL数据库原理与应用
- 大数据平台以及一些核心组件介绍
- Hamilton哈密顿最短路径(二进制状态压缩)
- java怎么重新开始游戏_添加开始,停止,重置按钮到简单的Java游戏
- “安装程序包的语言不受系统支持”的解决办法
- 利用Python取出excel数据并生成统计图
- 嵌入式物联网项目实践1.1
- 计算机类专业知识pdf,事业单位计算机专业知识整理(全)(20210324075052).pdf
- 翻译HoudiniEngine官方文档:PDG
- 解读一道微软经典面试题:海盗分宝石
- p2p 文件服务器集群,基于云计算的P2P流媒体服务器集群部署算法.doc