块级元素

块级元素占据其父元素（容器）的整个水平空间，垂直空间等于其内容高度。

<style>
    * {
        padding: 0;
        margin: 0;
    }

    .box1 {
        height: 50px;
        background-color: skyblue;
    }

    .box2 {
        width: 500px;
        height: 50px;
        background-color: blue;
    }

    .box3 {
        width: 500px;
        background-color: brown;
    }
</style>

<body>
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</body>

行内元素

一个行内元素只占据它对应标签的边框所包含的空间。行内元素设置宽高不会生效。

<style>
    * {
        padding: 0;
        margin: 0;
    }
    span {
        width: 500px;
        height: 500px;
        background-color: #8ABB55;
    }
</style>

<p>This <span>span</span> is an inline element; its background has been colored to display both the beginning and end of the inline element's influence</p>

块级元素与行内元素区别

格式
- 块级元素: 默认情况下，块级元素会新起一行。
- 行内元素: 默认情况下，行内元素不会以新行开始。
内容模型
- 块级元素: 一般块级元素可以包含行内元素和其他块级元素。
- 行内元素: 一般情况下，行内元素只能包含数据和其他行内元素。

常见的块级元素

<div>, <form>, <ul>, <h1>-<h6>, <p>    
<article>, <aside>, <header>, <hr>
<ol>, <section>, <table>

常见的行内元素

<a>, <img>, <span>, <b>, <i>, <strong>, <br>
<button>, <input>, <label>, <select>, <textarea>