内联元素设置padding和margin

偿我平生愿

已于 2022-01-26 21:19:49 修改

阅读量1.4k

点赞数

分类专栏：前端学习文章标签： css html css3

于 2022-01-26 21:18:48 首次发布

本文链接：https://blog.csdn.net/m0_64340992/article/details/122707698

版权

前端学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

内联元素无法设置宽高（img，input等替换元素除外），其大小取决于内容，被内容撑开。那么，padding和margin的设置对内联元素是否有效？

首先来看一下内联元素设置padding是否有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span {
            border: 2px solid black;
            font-size: 20px;
            padding: 20px;
        }
    </style>
</head>
<body>
<span>这是一个内联元素span</span>
</body>
</html>

效果如下：
在这里插入图片描述可以看到padding在四个方向上都有效果，但是值得注意的是上边框不见了，好像跑到了页面外。我们在上面加一个div元素，左右再加两个span元素看一看。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #s1,#s3 {
            border: 2px solid black;
        }
        #s2 {
            border: 2px solid black;
            font-size: 20px;
            padding: 20px;
        }
        div {
            background-color: red;
            width: 400px;
        }
    </style>
</head>
<body>
<div>这是一个块级元素div</div>
<span id="s1">这是一个内联元素span</span>
<span id="s2">这是一个内联元素span</span>
<span id="s3">这是一个内联元素span</span>
</body>
</html>

效果如下:
在这里插入图片描述

看上去span元素在垂直方向上撑开时就像是脱离了文本流一样，完全不考虑div元素的位置。在水平方向上一切正常。
由此可以得出结论：内联元素水平方向上的内边距(padding-left, padding-right)可以正常设置，垂直方向上的内边距从视觉效果上来说是可以设置的，但不会影响到整体布局。

接下来看一下外边距margin的设置是否正常

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #s1,#s3 {
            border: 2px solid black;
        }
        #s2 {
            border: 2px solid black;
            margin: 20px;
        }
        div {
            background-color: red;
            width: 400px;
        }
    </style>
</head>
<body>
<div>这是一个块级元素div</div>
<span id="s1">这是一个内联元素span</span>
<span id="s2">这是一个内联元素span</span>
<span id="s3">这是一个内联元素span</span>
</body>
</html>

效果如下：
在这里插入图片描述结论：内联元素外边距margin水平方向上设置有效，垂直方向上无效。

偿我平生愿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
内联元素设置padding和margin

内联元素无法设置宽高（img，input等替换元素除外），其大小取决于内容，被内容撑开。那么，padding和margin的设置对内联元素是否有效？首先来看一下内联元素设置padding是否有效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> spa
复制链接

扫一扫