行内元素和与行内块元素的margin-top问题

最新推荐文章于 2023-10-22 04:01:52 发布

KKRK_

最新推荐文章于 2023-10-22 04:01:52 发布

阅读量1.6k

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/KKRK_/article/details/110928676

版权

行内元素和与行内块元素的margin-top问题

内联(行级)元素不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。

源代码：给行内元素加padding属性，是可以设置的,也可以设置margin-left属性。

	 <style>
        .box{
            position: relative;
            width: 400px;
            height: 100px;
            border: 1px solid #000;
        }
        .w{
            padding: 10px;
            margin-left: 30px;
            background-color: yellow;
        }
    </style>
<body>
    <div class="box">
        <span class="w">span元素加了 padding属性和 margin-left属性</span>
    </div>
</body>
</html>

在这里插入图片描述

而行内元素不能设置margin-top/bottom属性，只要将行级元素转换成内联块级元素或块级元素，就可以了。

	<style>
        .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
        }
        .w{
            display: inline-block;
            margin-top: 30px;
            background-color: yellow;
        }
    </style>
<body>
    <div class="box">
        <span class="w">这是span行内元素标签</span>
    </div>
</body>
</html>

在这里插入图片描述

如果在行内标签前面还有一个行内标签，并且只让后面的出现距离，这时加margin-top，就没用了，前面的也会一起掉下来，加paddint-top/bottom属性也是没用的。

	<style>
        .box{
            width: 300px;
            height: 100px;
            border: 1px solid #000;
        }
        .w{
            display: inline-block;
            margin-top: 30px;
            background-color: yellow;

        }
    </style>
<body>
    <div class="box">
        <a href="#">超链接</a><span class="w">这是span行内元素</span>
    </div>
</body>
</html>

在这里插入图片描述

这时我们就用一种方法就可以设置距离，给需要移动的元素加transform属性就可以了

	<style>
        .box{
            position: relative;
            width: 300px;
            height: 100px;
            border: 1px solid #000;
        }
        .w{
            display: inline-block;
            transform:  translate(20px,20px);
            background-color: yellow;
        }
    </style>
<body>
    <div class="box">
        <a href="#">超链接</a><span class="w">span元素加了transform: translate属性</span>
    </div>
</body>
</html>

在这里插入图片描述

KKRK_

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
行内元素和与行内块元素的margin-top问题

行内元素和与行内块元素的margin-top问题内联(行级)元素不能设置宽高，但padding属性可以设置，需要注意的是行级元素不能设置margin-top和margin-bottom属性，但可以设置margin-left和margin-right属性。如果需要设置行级元素的margin-top或margin-bottom属性，必须将行级元素转换成内联块级元素或块级元素。源代码：给行内元素加padding属性，是可以设置的,也可以设置margin-left属性。 <style>
复制链接

扫一扫