（零基础）HTML中的行内元素和块级元素

RE_从零开始的敲代码生活

已于 2023-10-20 17:09:27 修改

阅读量536

点赞数 2

分类专栏： HTML 文章标签： html 前端

于 2023-10-18 20:46:20 首次发布

本文链接：https://blog.csdn.net/m0_64034224/article/details/133912629

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文是对HTML中众多元素的一种分类方式介绍。

前言

行内元素与块级元素是对HTML中众多元素的一种分类方式，本文将尽可能全面地说明如何区分行内元素和块级元素，并将介绍行内元素和块级元素的基本特性。

最后还会列举目前最常用的几种行内元素和块级元素。

注意：还有一种分类叫“行内块元素”，但是我们目前不谈，蕾姆会把它放在后面跟随css样式进行说明。

区分方式

首先，我们要认识两个较为具有代表性的元素，分别是块级元素div以及行内元素span。

<div>我是块级元素</div>
<span>我是行内元素</span>
<span>我是行内元素</span>

我们将通过给这两个元素设置样式来看他们在网页中的具体表现，从而进一步总结出行内元素和块级元素的特性。

页面效果：

样式设置：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            border: 1px red solid;
            /* 给div设置边框宽度为1px 边框颜色为红色 实线边框 */
        }
        span{
            border: 1px red solid;
            /* 给span设置边框宽度为1px 边框颜色为红色 实线边框 */
        }
    </style>
</head>
<body>
    <div>我是一个块级元素</div>
    <span>我是一个行内元素</span>
    <span>我是一个行内元素</span>
</body>
</html>

设置样式是为了让我们更好的区分被div和span包裹起来的部分

由图我们可以看到，被div包裹起来的文本内容，它外侧的边框长度占据了整整一行；而被span包裹起来的文本内容，则并排在了一行中。

这也就引出了两者的第一个结论：

块级元素在页面中独占一行，而行内元素与其他行内元素共享一行。

通常我们就是通过这一点来区分行内元素与块级元素的，当我们分不清时，只需要将元素的代码敲出来，然后通过浏览器中的检查来观察该元素是否独占一行。

但是两者之间的区别并不止这一点，接下来我们给两者再加样式，来观察他们的具体表现。

设置宽高：

        div{
            border: 1px red solid;
            /* 给div设置边框宽度为1px 边框颜色为红色 实线边框 */
            width: 200px;
            height: 200px;
            /* 设置div的宽和高分别为200px */
        }
        span{
            border: 1px red solid;
            /* 给span设置边框宽度为1px 边框颜色为红色 实线边框 */
            width: 200px;
            height: 200px;
            /* 设置span的宽和高分别为200px */
        }

页面效果：

通过在浏览器中的检查（多数为F12，部分机型为Fn+F12），我们发现div受到了宽高样式设置的影响，而span并没有。（div中201是包含了边框1px）

由此，我们得出第二个结论：

块级元素通过css属性设置宽高生效，而行内元素通过css属性设置宽高不生效。

既然行内元素设置css属性中的宽高不生效，那我们能不能通过其他办法改变呢？

接下来我们尝试更改一下文本的大小，看看会有什么变化。

设置字体大小：

    div{
            border: 1px red solid;
            /* 给div设置边框宽度为1px 边框颜色为红色 实线边框 */
            font-size: 20px;
            /* 设置div内文本字体大小为20px */
        }
        span{
            border: 1px red solid;
            /* 给span设置边框宽度为1px 边框颜色为红色 实线边框 */
            font-size: 30px;
            /* 设置span内文本字体大小为30px */
        }

页面效果：

由页面效果图可以看出，当我们设置了div和span内文本字体的大小之后，两者的边框都随着字体的变化而变化。但是根据第一条结论（块级元素独占一行），所以此处我们不讨论长度，只讨论高度，由此可以得到第三条结论：

行内元素和块级元素的高度都默认由内容撑起。

最后，我们要提前引申一个概念：盒子属性

盒子属性的概念是：

文档中的每个元素都可以被看作是一个矩形盒子具有四种属性。

margin

外边距代表盒子四周的区域，相邻元素的边距会合并。

border

介于padding的外边缘与margin的内边缘之间，默认值为0。

padding

内边距，在任何定义的边界内的元素内容周围生成空间。

width & height

用于设置内容区的宽高，该片区域用于显示内容。盒子高度默认为内容的高度。

我们分别给块级元素div和行内元素span设置外边距margin和内边距padding，看看两者会发生怎样的变化。

设置内、外边距：

        div{
            border: 1px red solid;
            /* 给div设置边框宽度为1px 边框颜色为红色 实线边框 */
            margin: 10px;
            /* 设置div的上、右、下、左外边距都为10px */
            padding: 10px;
            /* 设置div的上、右、下、左内边距都为10px */
        }
        span{
            border: 1px red solid;
            /* 给span设置边框宽度为1px 边框颜色为红色 实线边框 */
            margin: 10px;
            /* 设置span的上、右、下、左外边距都为10px */
            padding: 10px;
            /* 设置span的上、右、下、左内边距都为10px */
        }

页面效果：

图一（盒子模型）

图二（块级元素div）

图三（行内元素span）

很明显，当我们给div和span同时设置了内边距和外边距时，行内元素span的上、下外边距并没有生效。

所以我们得出第四条结论：

块级元素设置内、外边距上右下左都生效；行内元素设置内边距全部生效，设置上、下外边距不生效，左、右外边距生效。

总结

行内元素：

1.与其他行内元素共享一行

2.通过css属性设置宽高不生效

3.高度默认由内容撑起

4.设置上、下外边距不生效，设置左、右外边距生效

块级元素：

块级元素是用来进行网页布局的

1.独占一行且宽度默认100%

2.可以通过css属性设置宽高

3.高度默认由内容撑起

（内外边距生效）

常见的行内元素（目前）

     <span>行内元素</span><span>行内元素</span>
     <em>行内元素</em><cite>行内元素</cite><i>行内元素</i>
     <!-- 斜体 -->
     <b>行内元素</b><strong>行内元素</strong>
     <!-- 加粗 -->
     <sup>行内元素</sup><sub>行内元素</sub>
     <!-- 上标下标 -->
     <strike>行内元素</strike>
     <!-- 删除线 -->
     <mark>行内元素</mark>
     <!-- 底部高亮 -->

常见的块级元素（目前）

    <div>我是块级元素</div>
    <p>段落标签</p>
    <section>块级元素</section>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

RE_从零开始的敲代码生活

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
（零基础）HTML中的行内元素和块级元素

行内元素与块级元素是对HTML中众多元素的一种分类方式，本文将尽可能全面地说明如何区分行内元素和块级元素，并将介绍行内元素和块级元素的基本特性。最后还会列举目前最常用的几种行内元素和块级元素。
复制链接

扫一扫