源于一道简单的面试题：
行内元素和块级元素的区别是什么？
在总结的时候发现越写越多，干脆就单独拉出来做一个记录吧
在查阅中参考了很多人总结的资料，这里都有提到

格式上的区别

行内元素会在一条直线上排列，在同一行水平方向排列
块级元素各占据一行，垂直方向排列。
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。

内容上的区别

一般情况下，行内元素只能包含数据和其他行内元素。
而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。

注：这里的一般情况下是HTML4规范的说法

Paste_Image.png

在搜索这个问题的时候，在知乎发现了这样一个问题 a 标签为什么能够包含块级元素？
这里引用下高票回答，结合回答便对这个问题有了更好的认识

Paste_Image.png

width/height/padding/margin 属性上的区别

这里先要理解替换元素与非替换元素的概念

从元素本身的特点来讲，可以分为替换和不可替换元素。

替换元素
替换元素就是浏览器根据元素的标签和属性，来决定元素的具体显示内容。
例如：浏览器会根据<img>标签的src属性的值来读取图片信息并显示出来，
又如根据<input>标签的type属性来决定是显示输入框，还是单选按钮等。

HTML中的<img>、<input>、<textarea>、<select>、<object>都是替换元素。这些  
元素往往没有实际的内容，即是一个空元素，浏览器会根据元素的标签类型和属
性来显示这些元素。

不可替换元素
HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。例如<p>是一个不可替换元素，文字“段落的内容”全被显示。

以下是结论：

块级元素width/height/margin的四个方向/padding的四个方向都正常显示，遵循标准的css盒模型，如div。
行内替换元素width/height/margin的四个方向/padding的四个方向都正常显示，遵循标准的css盒模型，如img，input。
行内非替换元素width/height不起作用，用line-height来控制高度，大部分行内元素均为行内非替换元素，如span，a，i，label等。
行内非替换元素padding左右起作用，上下不会影响行高，但是对于有背景色和内边距的行内非替换元素，背景可以向元素上下延伸，但是行高没有改变。因此视觉效果就是与前面的行重叠。
行内非替换元素margin左右作用起作用，上下不起作用，这是由于行内非替换元素的外边距不会改变一个元素的行高。

对于行内非替换元素举一个可视化栗子
html代码如下

<body>
  <div class="top">上方元素</div>
  <div class="container">
    <span class="test">被有padding和margin的span包裹的文字内容</span>
    <span>普通文字内容</span>
    ![](https://www.w3.org/2008/site/images/logo-w3c-screen-lg)
  </div>
</body>

css代码如下

.top {
     height: 100px;
     width: 600px;
     background: #eee;
   }
   .container {
     width: 600px;
     background: #ddd;
   }
   .test {
     background: #ccc;
     margin: 20px;
     padding:20px;
   }

效果图