行内元素和块级元素分别有哪些特点【HTML】

一、行内元素

特点

1. 能够一行显示多个
2. 元素的宽度、高度、顶部和底部内外边距不能直接设置
3. 元素的宽度就是其内容的宽度

常见有哪些

<a>,<span>,<br>,<i>,<em>...

示例：

<style>
span{
         background-color: black;
         color: white;
     }
</style>
...
<span>BLACK</span>

运行结果：
（这里一行可以有多个行内元素，）

二、块级元素

特点

1. 每个块级元素独占一行
2. 可以直接设置宽度、长度、行高、上下内外边距
3. 元素在宽度不设置的情况下，继承父容器的宽度（高度不能继承）

常见有哪些

<div>,<p>,<h1~h6>,<ol>,<ul>,<dl>,<table>,<form>...

示例：

<style>
div{
         height: 50px;
         background-color: pink;
     }
</style>
...
<div>PINK</div>

运行结果
（这里没设置宽度，默认独占一行）