HTML元素分为块元素、行内元素以及行内块元素（H5之前）。（H5使用内容分类）

区别

块元素

元素单独占据一行（可以把块元素理解为固体，放进容器中就占据一整行，不管内容多少），宽度自动填满父容器
元素可以设置宽高（有宽高的木箱）
元素可以设置margin和padding
元素内可以包含块元素和行内元素

常见块元素： address、article、aside、blockquote、dd、div、dl、fieldset、figcaption、figure、footer、form、h1-h6、header、hgroup、hr、ol、p、pre、section、table、ul

行内元素

多个行内元素占据同一行
行内元素的宽度由其内容决定（设置无效）
可以设置水平方向margin（垂直方向无效），可设置水平方向padding（垂直方向设置有显示效果，但是对其他元素没有影响）
元素内只能包含文本或者其他行内元素(一种合理性要求)
行内元素在显示时元素之间有间隙，这是浏览器默认设置的默认间距

<body>
<span class="top">设置margin top</span><br>
<span class="bottom">设置margin bottom</span><br>
<span class="left">设置margin right</span><br>
<span class="right">设置margin left</span>
<span>aaaa</span>
</body>
<style>
  .top {
    margin-top: 50px;
  }
  .bottom {
    margin-bottom: 50px;
  }
  .right {
    margin-right: 50px;
  }
  .left {
    margin-left: 50px;
  }
</style>

效果图

QQ图片20221112165424.png

<body style="padding: 200px">
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span><br>
<span class="top">设置padding top</span>
<span class="bottom">设置padding bottom</span>
<span class="left">设置padding right</span>
<span class="right">设置padding left</span><br>
<span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
</body>
<style>
  .top {
    padding-top: 100px;
    background-color: green;
  }
  .bottom {
    padding-bottom: 100px;
    background-color: aqua;
  }
  .right {
    padding-right: 100px;
    background-color: red;
  }
  .left {
    padding-left: 100px;
    background-color: blue;
  }
</style>

效果图

QQ截图20221112170443.png

常见行内元素：b、big、i、small、tt、abbr、cite、em、span、strong、a、br、q、script、sub、sup、label、除了p以外，所有的文本标签都是行内元素

行内块元素

结合了块元素和行内元素的特点

默认宽度是内容宽度
可以设置宽高、margin、padding
和行内元素同一行时，元素之间会有间距

常见行内块元素：img、input、button、select、textarea

如何消除行内元素之间的间距

设置父元素font-size: 0px;

缺点：元素节点内有文本时，会影响文件的显示

<div class="parent">
  <span>行内元素1</span>
  <span>行内元素2</span>
  <span>行内元素3</span>
  <span>行内元素4</span>
</div>
<style>
  .parent {
    font-size: 0px;
  }
  span {
    font-size: 15px;
  }
</style>

设置word-spacing为合适的负值

<div class="parent">
  <span>行内元素1</span>
  <span>行内元素2</span>
  <span>行内元素3</span>
  <span>行内元素4</span>
</div>
<style>
  .parent {
    font-size: 0px;
  }
  span {
    word-spacing: -5px;
  }
</style>

设置浮动

两个浮动的元素并排显示时，浏览器默认间距为0

缺点：需要消除元素浮动的影响

<div class="parent">
  <span>行内元素1</span>
  <span>行内元素2</span>
  <span>行内元素3</span>
  <span>行内元素4</span>
</div>
<style>
  span {
    float: left;
  }
</style>

HTML之块元素、行内元素、行内块元素

区别

块元素