1 行内元素和块级元素的定义
任何HTML (超文本标记语言) 元素都有其默认的display属性，大多数都是行内元素（inline）或块级元素（block）。一个行内元素只占据它对应标签的边框所包含的空间，而一个块级元素占据其父元素（容器）的整个空间，因此创建了一个“块”。
2 行内元素和块级元素的区别
内容
一般情况下，行内元素只能包含数据和其他行内元素。而块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。
格式
默认情况下，行内元素不会以新行开始，而块级元素会新起一行。
常见元素
行内元素：<b>、<span>、<i><small>、<big>、<img>、<button>、<input>、<lable>、<select>、<textarea>等
块级元素：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、<div>、<p>、<address>、<acticle>、<ol>、<ul>、<output>、<form>（比较特殊，它只能用来容纳其他块元素） 、<table>、<canvas>、<footer>等
用法
1、一般情况下，行内元素设置width和height属性无效，块级元素可以设置width和height属性。（注意，块级元素设置了width宽度属性后仍然是独占一行的）
2、块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果，但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。（水平方向有效，竖直方向无效）
3 行内元素和块级元素的相互转化
display: none; 不显示该元素
display: block; 可将行内元素转化为块级元素
display: inline; 可将块级元素转化为行内元素
display: inline-block; 转化为行内块级元素（即不默认换行，但是可以设置width、height、margin、padding等属性）
此外，还可以通过给行内元素设置float:left/right、positon:absolute/fixed属性，也可以使行内元素转化为块级元素，但是不默认继承父级元素的宽度，可以设置width、height、margin、padding等属性。但是替换时，还需要注意这个方法转换为块级元素只是float与position的副作用，他们本身的作用还会干扰布局效果。
<div class="child"> ???<span class="test">行内元素</span> </div> <div class="child">块级元素</div>
.test{ ?background-color: #000000; ?color: #FFFFFF; ?float:left; ?width:90px;}.child{ ?background-color: #125645; ?width: 150px; ?height: 40px; ?color: #FFFFFF; ?margin: 10px; ?overflow: hidden; ?display: inline-block;}参考：https://www.jianshu.com/p/274614a078f3
https://blog.csdn.net/liuying1802028915/article/details/78222833
HTML 行内元素和块状元素的理解
原文地址：https://www.cnblogs.com/xiaokeai0110/p/9183430.html