The difference between inline elements, block elements, and inline-block elements

I. Introduction

HTML classifies elements into three types: inline elements , block elements , and inline-block elements . The three can be converted to each other, and the display property can be used to convert the three arbitrarily.

(1) display: inline. Converted to inline elements;
(2) display: block. Converted to a block element;
(3) display: inline-block. Converted to an inline block element.

1. Inline elements

Inline elements: Inline elements are mostly descriptive markup .

  <span></span>
  <a></a>  链接
  <br>  换行
  <b></b>  加粗
  <strong></strong>  加粗
  <img >  图片
  <sup></sup>  上标
  <sub></sub>  下标
  <i></i>  斜体
  <em></em>  斜体
  <del></del>  删除线
  <u></u>  下划线
  <input></input>  文本框
  <textarea></textarea>  多行文本
  <select></select>  下拉列表

Features:
(1) Setting the width and height is invalid;
(2) Margin is only valid for left and right, but not up and down; padding is valid for both left and right, but it will expand the space; (3) Wrapping
will not be performed automatically;
Can contain inline elements, not block elements.

2. Block elements

Block-level elements: block-level is mostly structural markup

  <address></adderss>   
  <center></center>  地址文字
  <h1></h1>  标题一级
  <h2></h2>  标题二级
  <h3></h3>  标题三级
  <h4></h4>  标题四级
  <h5></h5>  标题五级
  <h6></h6>  标题六级
  <hr>  水平分割线
  <p></p>  段落
  <pre></pre>  预格式化
  <blockquote></blockquote>  段落缩进
  <marquee></marquee>  滚动文本
  <ul></ul>  无序列表
  <ol></ol>  有序列表
  <dl></dl>  定义列表
  <table></table>  表格
  <form></form>  表单
  <div></div>

Features:
(1) Setting the width and height is valid. If the width is not set, the default is 100% of the parent element;
(2) Valid for margin, padding, top, bottom, left, and right;
(3) Automatic line wrapping; 4) Multiple block elements from top (5) Block
elements can contain block elements and inline elements.

3. Inline block elements

Inline block elements combine the characteristics of inline elements and block elements, but each has trade-offs.

Features:
(1) No automatic line wrapping;
(2) Setting the width and height takes effect;
(3) The default arrangement is from left to right.