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. cloud配置中心遇到的坑

    https://blog.csdn.net/z960339491/article/details/80593982分布式配置中心为什么要有用分布式配置中心这玩意儿?现在这微服务大军已经覆盖了各种大小型 ...

  2. Python中操作SQLAlchemy

    一.ORM 框架简介 对象-关系映射(Object/Relation Mapping,简称ORM),是随着面向对象的软件开发方法发展而产生的.面向对象的开发方法是当今企业级应用开发环境中的主流开发方法 ...

  3. 建立SSH的信任关系

    1.在Client上root用户执行ssh-keygen命令,生成建立安全信任关系的证书.  Client端 # ssh-keygen -t rsa Generating public/private ...

  4. dup

    dup是一个操作符,由编译器识别处理,和db.dw.dd等数据定义伪指令配合使用,用来进行数据的重复. 例如 db  3  dup (0) 定义了3个字节,它们的值都是0,相当于db 0,0,0 db ...

  5. 国内淘宝镜像 cnpm转npm

    npm install -g cnpm --registry=http://registry.npm.taobao.org

  6. classpath分析

    1. 什么是classpath? classpath相当于Java执行环境,它指定了一些常用的包或jar的位置,方便我们对项目文件的使用,而不必重复多次写所需要文件的位置.    在classpath ...

  7. python之virtualenv

    一 virtualenv简介 virtualenv------用来建立一个虚拟的python环境,一个专属于项目的python环境.用virtualenv 来保持一个干净的环境非常有用 在开发Pyth ...

  8. 开源项目CircleImageView

    1.在自己MainActivity所在包下创建CircleImageView.class文件 package 自己包名; import android.content.Context; import ...

  9. linux下svn导入新目录到svn服务器特定地址

    svn import transplant-apps/ svn://xx.xx.xx.90/ -m "changelog:add transplant-apps to 90-svn" ...

  10. XStream将XML转javaben，出现多余的tag，导致出错

    今天在测试银联无卡快捷支付的案例时,多了一个多tag兼容性测试,它是指银联的XML报文中会出现多余的tag,如果我们用XStream解析的时候,没有Javabean的字段可以对应上,就会报错!提示: ...