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. GridView中CheckBox翻页记住选项

    <asp:GridView ID="gvYwAssign" runat="server" AutoGenerateColumns="False& ...

  2. swift - 加速器/摇一摇功能

    import UIKit class ViewController: UIViewController { override func viewDidLoad() { super.viewDidLoa ...

  3. AsnycTask内部实现原理

    AsnycTask 原理就是“线程池 + Handler”的组合. 使用线程池的主要原因是避免不必要的创建及销毁线程的开销. AsyncTask 里的线程池: private static final ...

  4. js继承的几种类型

    首先提供构造函数 1. 构造函数实现继承 原理:改变函数上下文实现继承(call,apply,return,bind) return {}/function(){}   如果返回值是对象 那么this ...

  5. 如何查看Chrome浏览器保存的账号密码

    之前告诉大家如何一键查看所有保存在IE里的所有密码(点击查看原文),现在来告诉大家如何一键查看Chrome浏览器的所有密码.某种意义上上,查看Chrome的密码比查看IE的更简单,因为查看IE密码还需 ...

  6. rviz1

    msckf_vio ####查看topic列表:wj@wj-Inspiron-5437:~$ rostopic list/benchmark_publisher/path/cam0/image_raw ...

  7. DirectX中坐标系问题

    自己属于笨类型,以前总是记不住directx坐标系是怎样的,今天在网上看到一篇文章,借鉴过来. 1. 明确DirectX是左手坐标系. 描述如下:1. 伸出左手,手面朝上,手背朝下,握住z轴,大拇指方 ...

  8. js对象(BOM部分/DOM部分)

    JS总体包括ECMAScript,DOM,BOM三个部分,但是能够和浏览器进行交互的只有DOM和BOM,那么到底什么是DOM和BOM呢 概念 BOM(Browser Object Model)是指浏览 ...

  9. VS2010工程结构及其瘦身策略

    VS2010工程结构: 我们以在VS2010上利用MFC创建的单文档应用程序HelloWorld的文件结构为例,简述VS2010应用程序工程中文件的组成结构. 1.解决方案相关文件 解决方案相关文件包 ...

  10. MySQL 系列（一）安装

    MySQL 系列(一)安装 以 Centos7 下安装 MySQL 5.6 为例. 一.环境准备 (1) 下载 下载地址: https://dev.mysql.com/get/Downloads/My ...