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

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

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

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

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

为什么行内元素不能设置margin-top/margin-bottom/padding-top/padding-bottom?的更多相关文章

  1. 块级元素或者行内元素在设置float属性之后是否改变元素的性质？

    块级元素使用float属性后,将其属性变成inline-block,不能改变其块级元素的性质,只是能有块级元素的特性,不独占一行,宽度不会占满父元素,和行内元素排列成一行 行内元素使用float属性后 ...

  2. 块级元素、行内元素、display属性

    块级元素 特点: 总是以一个块的形式表现出来,占领一整行.若干同级块元素会从上之下依次排列(使用float属性除外). 可以设置高度.宽度.各个方向的margin以及各个方向的padding. 当宽度 ...

  3. 行内元素为何不能设置margin-top、margin-bottom；padding-top、padding-bottom值

    曾经学过的教程中写明:行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外 ...

  4. python 全栈开发，Day48(标准文档流,块级元素和行内元素,浮动,margin的用法,文本属性和字体属性)

    昨日内容回顾 高级选择器: 后代选择 : div p 子代选择器 : div>p 并集选择器: div,p 交集选择器: div.active 属性选择器: [属性~='属性值'] 伪类选择器 ...

  5. 行内元素的上下margin 和 img元素的上下margin

    行内元素的特点有: 1.与其他元素在同一行 2.宽度(width).高度(height).内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bott ...

  6. li标签行内元素高度及居中

    <head> <title><title> <style type="text/css"> * { padding: 0px; ma ...

  7. 3、第3课CSS块级、行内元素、绝对定位、相对定位、固定位置20150922

    1.块级元素 A:特点: A.1默认显示在父标签的左上角 A.2块级元素默认占满一行(占满整个文档流) B:常见的块级元素 P   h1--h6   ul  li    ol  li   div  h ...

  8. 从块级元素和行内元素的分析到bfc的布局理解

    接口和属性介绍 播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性说 ...

  9. CSS块级元素与行内元素

    CSS块级元素与行内元素 行内元素与块状元素 1.块级元素:可以设置 width, height属性.  行内元素:设置width和height无效,其宽度随其元素的内容(文字或者图片等)的宽度而变化 ...

随机推荐

  1. day 24 socket 黏包

    socket 套接字的使用: tcp是基于链接的,必须先启动服务端,然后再启动客户端去链接服务端 server 端 import socket sk = socket.socket() # 实例化一个 ...

  2. Linux系统下重启Tomcat

    在Linux系统下,重启Tomcat使用命令操作的! 首先,进入Tomcat下的bin目录 cd /usr/local/tomcat/bin 使用Tomcat关闭命令 ./shutdown.sh 查看 ...

  3. Comparing Code Playgrounds Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave

    What is a code playground? Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave are HTML, CSS ...

  4. sql backup

    create or replace procedure P_updateasbegin update security_price p set p.closing_price = (select MI ...

  5. 如何指定vim 的查找是从上往下还是从下往上[z]

    vim 搜索可以是 / 或者 ?,前者是往下找,后者是往前找. 用 n 查找下一个的时候,就和这两个指令指定的方向相同.如果你想改变方向的话,比如想往下找,那么 / 完了直接回车就行了.表示再次使用上 ...

  6. 《大道至简》第一章--编程的精意 读后感（JAVA伪代码）

    1. /*愚公移山 原始需求:惩山北之塞,出入之迂: 项目沟通:聚室而谋曰: 项目目标:毕力平险,指通豫南,达于汉阴: 技术方案:扣石垦壤,箕畚运于渤海之尾: 人员构成:愚公率子孙荷担者三夫,邻人京城 ...

  7. HSTS

    一.简介   二.部署   三.其他 1)利用 HSTS 安全协议柔性解决全站HTTPS 的兼容性问题 http://www.toutiao.com/a6383719177903833346/

  8. Oracle_高级功能(6) 分区

    oracle分区表1.分区表: 当表中的数据量不断增大,查询数据的速度就会变慢,应用程序的性能就会下降,这时就应该考虑对表进行分区. 表进行分区后,逻辑上表仍然是一张完整的表,只是将表中的数据在物理上 ...

  9. 反射中，Class.forName 和 classloader 的区别

    https://blog.csdn.net/qq_27093465/article/details/52262340 java中class.forName()和classLoader都可用来对类进行加 ...

  10. 探索未知种族之osg类生物---呼吸分解之事件循环三

    那我们就开始处理这些事件中得到的所有的交互事件,首先我们要判断这些事件是否包含osg的退出事件,那什么情况下会触发这个退出事件呢?如果您运行过osg中example中的小例子的,聪明的你一定就会发现当 ...