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. apache jmeter 压力测试

    前面讲了linux下的压力测试,今天来个windows下的,用jmeter为例 我用了两个apache-jmeter-3.1和apache-jmeter-4.0分别进行了测试, 前者高并发电脑卡死时间 ...

  2. springmvc+logback项目的日志搭建

    一.重写HTMLLayout 两个自定义类:LzhHTMLLayoutBase和LzhHTMLLayout LzhHTMLLayoutBase代码如下: package top.liaozhengha ...

  3. ELK logstash 启动慢的解决方法

    最近开始测试部署ELK, 在部署logstash的时候出现一个故障: logstash在第一次安装完成以后启动正常, 但是之后启动时间越来越长, 5分钟以上甚至10多分钟.以至于怀疑程序错误, 在重装 ...

  4. python 数据类型 之 tuple 元组

    python 3.6.5 元组的特性和定义 与列表类型 只不过 [  ] 改成了() 特性: 1.不可变(元组本身不可变,但是可以存可变类型的element){猜测因为可变element的地址不可变而 ...

  5. nginx日志

    相关知识可参考文章:nginx日志格式及自定义日志配置 1.查看nginx的log配置 1)vim /etc/nginx/nginx.conf 打开为 user nginx;worker_proces ...

  6. this指针 new 和delete

    指针类型的函数:函数的返回值是指针. 不要将非静态局部地址用作函数的返回值,离开函数后就失效了 在子函数中定义局部变量后将其地址返回给函数就是非法地址 在子函数中用new操作取得的内存地址返回给主函数 ...

  7. AppStore企业账号打包发布APP流程详解

    一.通过企业账号申请证书 1 Certificate Signing Request (CSR)文件 在Mac系统中进入“钥匙串访问”,选择“钥匙串访问”-“证书助理”-“从证书颁发机构请求证书…”, ...

  8. 没加载redis类，却可以实例化redis

    原因:phpinfo里面已有redis扩展

  9. 高级设计总监的设计方法论——5W1H需求分析法 KANO模型分析法

    本期开始进入设计方法论的学习,大湿自己也是边学边分享,算是巩固一遍吧: 另外这些理论基本都是交叉结合来应用于工作中,我们学习理论但不要拘泥于理论的框架中,掌握后要灵活运用一点- 这些理论一部分来自于我 ...

  10. Select isnull(,)

    类似于 select isnull(...,1) from table 这样的 isnull函数防止查询结果为空,防止接下来需要这个值时可能造成空指针异常