css块级元素和行内元素区别

作者：还依然存在发布日期:2025-08-21 浏览:77

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 块级元素默认独占一行，宽度默认是100% */
        .block {
            display: block;
            width: 100%;
            background-color: lightblue;
            margin-bottom: 10px;
        }

        /* 行内元素和其他元素在一行显示，宽度只占内容所需 */
        .inline {
            display: inline;
            background-color: lightcoral;
            padding: 5px;
        }
    </style>
</head>
<body>
    <!-- 块级元素示例 -->
    <div class="block">这是一个块级元素</div>
    <div class="block">这是另一个块级元素</div>

    <!-- 行内元素示例 -->
    <span class="inline">这是一个行内元素</span>
    <span class="inline">这是另一个行内元素</span>
</body>
</html>

解释说明：

块级元素：默认情况下，块级元素（如 div）会独占一行，并且宽度默认是其父元素的100%。多个块级元素会依次排列，每个元素都在新的一行开始。
行内元素：行内元素（如 span）不会独占一行，它们会在同一行内依次排列，宽度只占实际内容所需的大小。

通过上面的代码和样式，你可以看到块级元素和行内元素在布局上的不同表现。

上一篇：css background 简写

下一篇：css压缩在线