行内元素与块级元素的区别
HTML 中行内元素和块级元素的特性与使用场景
问题
行内元素和块级元素有什么区别？
解答
行内元素（Inline Elements）
行内元素在水平方向上以行内方式显示，不会独占一行。
特性：
- 宽度和高度由内容决定，无法设置固定宽高
- 只能容纳文本或其他行内元素，不能容纳块级元素
- 可以设置左右的
margin和padding，但上下margin和padding不起作用 - 常见元素：
<span>、<a>、<strong>、<em>、<img>等
<span>行内元素1</span>
<span>行内元素2</span>
<!-- 两个 span 会在同一行显示 -->块级元素（Block-level Elements）
块级元素默认独占一行，即使宽度未填满父元素。
特性：
- 可以包含其他块级元素和行内元素
- 宽度、高度、内外边距都可以通过 CSS 设置
- 会自动在前后创建换行
- 常见元素：
<div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table>等
<div>块级元素1</div>
<div>块级元素2</div>
<!-- 两个 div 会各占一行 -->通过 CSS 修改显示方式
可以使用 display 属性改变元素的显示类型：
/* 将行内元素变为块级元素 */
span {
display: block;
}
/* 将块级元素变为行内元素 */
div {
display: inline;
}
/* 行内块元素：既可以设置宽高，又不独占一行 */
span {
display: inline-block;
}关键点
- 行内元素不独占一行，块级元素独占一行
- 行内元素无法设置宽高，块级元素可以设置宽高
- 行内元素的上下
margin和padding不生效 - 可以通过
display属性改变元素的显示类型 inline-block结合了两者优点：可设置宽高且不独占一行
目录