inline-block

最新推荐文章于 2022-09-14 15:24:13 发布

Joyce的前端日常

最新推荐文章于 2022-09-14 15:24:13 发布

阅读量420

点赞数

分类专栏： CSS 文章标签： css inline-block 居中间隙

本文链接：https://blog.csdn.net/joyce_lcy/article/details/48290569

版权

CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

1、居中

在设置inline-block居中时，往往会想到vertical-align: middle。但无论是加到父元素还是子元素上都无法使其相对于父元素垂直居中。

inline-block具有inline的属性，也就可以理解为它是一个可以设置宽高行内元素。行内元素！！行内元素居中，可以使用line-height。所以，设置父元素的line-height。如果父元素高度不固定，请参照之前写的博客。vertical-align: middle使其将垂直参照点（元素自身是有高度的）放在元素自身垂直的中心位置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        .parent{
            background-color:indianred;
            height: 300px;
            width:20%;
            line-height:300px;
            text-align: center;
        }
        .child1,.child2{
            display: inline-block;
            width:20px;
            vertical-align: middle;
        }
        .child1{
            background-color: aquamarine;
            height: 20px;
        }
        .child2{
            background-color: blue;
            height: 60px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
</body>
</html>

2、间隙

页面布局时，常常设置元素为inline-block，但是，元素之间会有间隙。平常有个间隙也就不太在意，但在设置如两个元素各占50%时，会发现因为有间隙而被挤到下一行去。刚才说到了inline-block是一个可以设置宽高的行内元素，这里，我们可以将其理解为一个文字或者字母。浏览器会给这些一个font-size。于是，我们将其父元素设置font-size:0，就可以解决了。为什么设置本身的font-size无效呢？等同于这样一个段落<p>abc</p> ，其字体大小应该在p元素上设置。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <style>
        .parent{
            font-size: 0;
            width:100%;
        }
        .child1,.child2{
            display: inline-block;
            width:50%;
            height:40px;
        }
        .child1{
            background-color: aquamarine;
        }
        .child2{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="child1"></div>
    <div class="child2"></div>
</div>
</body>
</html>