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. 血的教训：Protocol http not supported or disabled in libcurl

    报错显示:http not supported or disabled in libcurl 查看配置 curl -V ---------------------------------------- ...

  2. python基础之socket编程 （转自林海峰老师）

    python基础之socket编程   阅读目录 一 客户端/服务器架构 二 osi七层 三 socket层 四 socket是什么 五 套接字发展史及分类 六 套接字工作流程 七 基于TCP的套接字 ...

  3. c# 上传excel数据总结(一)线程的使用

    1: 因为程序涉及到上传,开始暂停,继续,删除, thread 在老版本用使用th.Abort(); th.Resume(); 停止 恢复  th.Suspend(); 挂起 猛的一看挺合适啊..但微 ...

  4. c#特性attribute：

    特性是被编译到metadata中,  是提供给反射用的. 特性attribute:1 什么是attribute,和注释有什么区别 2 声明和使用attribute3 使用attribute完成扩展4 ...

  5. 2Q - Fibbonacci Number

    Your objective for this question is to develop a program which will generate a fibbonacci number. Th ...

  6. Windows下war包部署到Linux下Tomcat出现的问题

    最近,将Windows下开发的war包部署到Linux下的Tomcat时报了一个错误:tomcat error in opening zip file.按理说,如果正常,当把war包复制到webapp ...

  7. c++文件的输入输出

    emmm,错误地方还请指出(以下代码复制粘贴会报错,我用codeblocks测试过,不知道为什么qaq) 头文件#include < fstream > 这里ofstream是" ...

  8. Laravel policy 的应用

    Laravel 提供更简单的方式来处理用户授权动作.类似用户认证,有 2 种主要方式来实现用户授权:gates 和策略,我这里主要讲解下策略的使用. 文档 上面有详细的说明,我这里只根据自己使用过程做 ...

  9. [Robot Framework] 通过Robot Remote Server调用White Library测试WPF开发的桌面产品

    参考 : https://github.com/jatalahd/WhiteRobotLibrary 通过此源代码编译WhiteRobotLibrary.dll,然后把高亮标记的这5个dll全部拷贝到 ...

  10. proguard-rules.pro、混淆、导jar包

    前记: 买了一个<精通Android Studio>本来最想看的是关于混淆导jar包的,哪知道没有,有点小失望. 好吧,自己来. 在用Android Studio开发的时候,把minify ...