inline行内元素与padding margin 的断舍离

最新推荐文章于 2024-05-18 06:06:53 发布

孤枫_J

最新推荐文章于 2024-05-18 06:06:53 发布

阅读量2.7k

点赞数 4

分类专栏： HTML+CSS

本文链接：https://blog.csdn.net/qq_35809245/article/details/53641136

版权

HTML+CSS 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

一我们都知道，对于行内元素可以设置 padding-left padding-right margin-left margin-right，可以将其和与之一行的元素挤开一定的距离，一般我们认为行内元素不能设置margin和padding的top 和 bottom，其实这些是可以的，只是，对于行内元素设置这些属性没有太大的意义，我称之为”残疾的盒模型“
二那么什么是”残疾的盒模型“呢？
来看一下demo:

    <style type="text/css">
    .one{
        width: 300px;
        height: 100px;
        border:1px solid red;
        margin-top: 150px;  
    }
    .one a {
        padding: 100px 50px;

        margin-top: 50px;
        line-height: 100px;

        background: pink;
    }
    .two {
        width: 300px;
        height: 100px;
        background: green;
    }

</style>
</head>
<body>
<div class="one">第一个盒子
    <a href="">购物车</a>
</div>
<div class="two">第二个盒子</div>
</body>

设置了padding-top

a 标签的盒模型如下：
a标签的盒模型

通过以上demo可以看出来，其实堆行内元素设置top bottom 的padding和margin 是可以的，只是
第一：设置的margin-top bottom基本上属于被浏览器抛弃置之不理的状态；
第二：设置了padding-top bottom的行内元素，背景渲染的时候依然会渲染上，但是不会挤开其他盒子的内容了。
第三：padding margin - left right 还是可以挤开盒子的左右距离的。

三顺便总结下最让人恶心的line-height属性吧，看定义：line-height该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
W3C上明确说了用在块级元素上，但是，如果我用在行内元素上呢？其实效果是一样的
走个demo:

        <style type="text/css">
        .one{
            width: 300px;
            height: 100px;
            border:1px solid red;
            margin-top: 150px;

        }

        .one a {
            padding: 100px 50px;
            margin-left: 50px;
            margin-top: 50px;
            line-height: 60px;
            background: pink;
        }
        .two {
            width: 300px;
            height: 100px;
            background: green;
        }
        .three {
            width: 300px;
            height: 20px;
            background: blue;
        }

    </style>
</head>
<body>
    <div class="one">
        第一个盒子<a href="">购物车</a>
        <div class="three">第三个盒子</div>
    </div>
    <div class="two">第二个盒子</div>
</body>

-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。

注意这句话，走你。。。。。来看效果，不是让你走的。。。。（大家可以在浏览器里面改下line-height的值看下变化

这里写图片描述

去掉line-height 的效果图

这里写图片描述

实践出真知，针织衫真保暖。咯咯。
结论1 行内元素还是可以设置line-height的，行内元素的padding值可以被背景渲染的。
去掉 a 标签的 padding: 100px 50px;试下效果：

.one a {
            margin-left: 50px;
            margin-top: 50px;
            line-height: 60px;
            background: pink;
        }

这里写图片描述

结论2 行内元素的line-height属性并不能使该元素的背景被渲染出来。

~~结论3 我想去趟厕所，憋了有一会了，对不起，pangguang ! 你们看不到删除线的文字吧!~~

孤枫_J

关注

4
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
inline行内元素与padding margin 的断舍离

inline 行内元素 padding margin -top bottom line-height
复制链接

扫一扫

专栏目录