HTML行内元素与块级元素有哪些及区别

最新推荐文章于 2025-04-20 21:55:46 发布

@白天不懂爷的黑

最新推荐文章于 2025-04-20 21:55:46 发布

阅读量1.2k

点赞数 22

文章标签： html 前端 javascript

本文链接：https://blog.youkuaiyun.com/qq_74095822/article/details/134882162

版权

本文详细介绍了HTML中的行内元素（如span）和块级元素（如div），包括它们的特性和代码示例，以及两者之间的区别，强调了元素的语义化使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、HTML常见的行内元素

最常用的是span，其他还有a、 img、 input、textarea、select、label
还有包括一些文本元素如：br 、b、 strong、sup 、sub、 i、em 、del、 u等。

行内元素的特点：

1、不能设置宽高
2、只占据它所在的文本行的空间
3、默认宽度是内容宽度
4、内边距(padding)值只左右下有效，外边距(margin)值只左右有效

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<span style="width: 100px;height: 100px;margin: 100px;background-color: pink">我是行内元素</span>
</a>
</body>
</html>

如图所示
在这里插入图片描述

二、HTML常见的块级元素

div、table、form、p、ul、h1…h6、hr 、pre、address、center、marquee 、blockquote 等。

块级元素的特点：

块级元素会占据一整行，会强制换行。
块级元素可以包含其他块级元素和行内元素。
块级元素可以设置宽度和高度。
margin和padding对上下左右四个方向都有效

代码演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="width: 400px;height: 300px;margin: 100px;background-color: powderblue">
    我是块级元素
    <span style="width: 100px;height: 100px;margin: 100px;background-color: pink">我是行内元素</span>
</div>
</a>
</body>
</html>