HTML中行内元素块级元素行内块元素

最新推荐文章于 2023-06-07 10:09:05 发布

目羲

最新推荐文章于 2023-06-07 10:09:05 发布

阅读量2.5k

点赞数 2

分类专栏：前端知识点汇总文章标签： html css html5

本文链接：https://blog.csdn.net/qq_45667304/article/details/125185317

版权

前端知识点汇总专栏收录该内容

4 篇文章 0 订阅

订阅专栏

行内元素块级元素

1.当给行内元素定义一个具体的宽高时，是没有用的。只有对于块级元素是有用的。除非在行内元素里面写上内容，那个内容有多大，那就会被撑开有多大
例：
如果是块级元素

<style>
    #aa {
        height: 300px;
        width: 300px;
        background-color: red;
    }
</style>

<body>
    <div id="aa"></div>
</body>

在这里插入图片描述
如果是行内元素

<style>
    #aa {
        height: 300px;
        width: 300px;
        background-color: red;
    }
</style>

<body>
    <span id="aa"></span>
</body>

在这里插入图片描述
那就毫无显示，如果在里面写上内容

在这里插入图片描述

2.块级元素各独占一行，如果改成行内元素，则会变成一行。
如果给行内元素设置外边距，只有左右有外边距，上下是没有外边距的，块级元素设置外边距的都是有用的
设置行元素

<style>
    span {
        height: 300px;
        width: 300px;
        background-color: red;
    }
    
    #bb {
        background-color: blue;
    }
</style>

<body>
    <span id="aa">阴阳师</span>
    <span id="bb">大天狗</span>
</body>

</html>

在这里插入图片描述
设置外边距

<style>
    span {
        height: 300px;
        width: 300px;
        background-color: red;
        margin: 100px;
    }
    
    #bb {
        background-color: blue;
    }
</style>

<body>
    <span id="aa">阴阳师</span>
    <span id="bb">大天狗</span>
</body>

在这里插入图片描述
行内元素适合显示具体内容，而块级元素适合做布局

行内块元素

在HTML设置标签为span，在css里面设置display：inline-block，span标签就可以设置宽高和上下margin

<style>
    span {
        display: inline-block;
        height: 300px;
        width: 300px;
        background-color: red;
        margin: 100px;
    }
    
    #bb {
        background-color: blue;
    }
</style>

<body>
    <span id="aa">阴阳师</span>
    <span id="bb">大天狗</span>
</body>

在这里插入图片描述

目羲

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML中行内元素块级元素行内块元素

1.当给行内元素定义一个具体的宽高时，是没有用的。只有对于块级元素是有用的。除非在行内元素里面写上内容，那个内容有多大，那就会被撑开有多大例：如果是块级元素如果是行内元素那就毫无显示，如果在里面写上内容2.块级元素各独占一行，如果改成行内元素，则会变成一行。如果给行内元素设置外边距，只有左右有外边距，上下是没有外边距的，块级元素设置外边距的都是有用的设置行元素设置外边距行内元素适合显示具体内容，而块级元素适合做布局在HTML设置标签为span，在css里面设置display：in
复制链接

扫一扫