博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?
阅读量:6992 次
发布时间:2019-06-27

本文共 655 字,大约阅读时间需要 2 分钟。

HTML 里的元素分为替换元素(replaced element)和非替换元素(non-replaced element)。

- 替换元素是指用作为其他内容占位符的一个元素。最典型的就是img,它只是指向一个图像文件。以及大多数表单元素也是替换,例如input等。
- 非替换元素是指内容包含在文档中的元素。例如,如果一个段落的文本内容都放在该元素本身之内,则这个段落就是一个非替换元素。

讨论margin-topmargin-bottom对行内元素是否起作用,则要对行内替换元素和行内非替换元素分别讨论。

首先我们应该明确外边距可以应用到行内元素,规范中是允许的,不过由于在向一个行内非替换元素应用外边距,对行高(line-height)没有任何影响。由于外边距实际上是透明的。所以对声明margin-topmargin-bottom没有任何视觉效果。其原因就在于行内非替换元素的外边距不会改变一个元素的行高。而对于行内非替换元素的左右边距则不是这样,是有影响的。

而为替换元素设置的外边距会影响行高,可能会使行高增加或减少,这取决于上下外边距的值。行内替换元素的左右边距与非替换元素的左右边距的作用一样。

对于行内元素,设置左右内边距,左右内边距将是可见的。而设置上下内边距,设置背景颜色后可以看见内边距区域有增加,对于行内非替换元素,不会影响其行高,不会撑开父元素。而对于替换元素,则撑开了父元素

转载于:https://www.cnblogs.com/fancyLee/p/8068314.html

你可能感兴趣的文章
Android之复选框对话框
查看>>
【RabbitMQ系列】队列、绑定、交换器
查看>>
Run as ant build每次都执行两次
查看>>
如何在微信公众号下载保存图片??
查看>>
Spring读书笔记——bean解析
查看>>
算法练习(5)数字列表中 连续最大的和
查看>>
C# 导出 不保存 直接显示
查看>>
bzoj4445&&dtoj#2348. 小凸想跑步(convex)
查看>>
常见模块设计--权限管理(一)
查看>>
powerdesigner中实现PDM到MYSQl数据库的转换《转》
查看>>
解决element-ui 中upload组件使用多个时无法绑定对应的元素
查看>>
[Docker]容器镜像
查看>>
stl学习之模板
查看>>
CentOS-7.3.1611编译安装 Nginx-1.12.1+mysql-5.7.19+PHP-7.1.8+zabbix-3.4.1
查看>>
元学习 - Learning How to Learn - 第一课:集中与发散思维
查看>>
一种具有细节保留功能的磨皮算法。
查看>>
排序算法7--选择排序--堆排序
查看>>
iOS开发规范&建议
查看>>
[原]如何为SqlServer2008数据库分配用户
查看>>
【leetcode】Basic Calculator III
查看>>