行内块问题?（想让块转换成行内块会出现很多问题）-CSDN博客

把块级元素转换成行内块,让他们在一行显示,出现的一些问题

1.有一个间隙
2.一个块内有内容一个块没内容,有内容的块会下坠,有内容的块的文字内容会和没内容的块基线对齐,加一个vertical-align:top,下坠的块就上去了

解决间隙的问题

1.消除回车换行,让代码在一行显示
2.给它的父级加font-size:0;(font-size父级为0,子元素是继承的,如果子级没有文字,就不用设置字体大小),然后再给每个具体的元素设置文字大小(字体大小,有需要就设置,没需要就不设置) 总结:下面的代码,会出现盒子掉下的情况,这是因为行内元素或者行内块级元素它们默认的对齐方式是“基线对齐”,我们在上面的代码中加入,vertical-align:top;就可以解决,vertical-align还有很多值,但是都不多常用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>61</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .main{
            font-size: 0;/*加font-size两个块之间的空格就消失了*/
        }
        .box1,.box2{
            width: 100px;
            height: 100px;
            background: greenyellow;
            display: inline-block;
            vertical-align: top;/*加上基线对齐,掉下来的块就可以上去了*/
            font-size:16px;/*如果再单独给某个元素设置字体大小再设置*/
        }

    </style>
</head>
<body>
<div class="main">
    <!--.box1和.box2放一行就会去除两个块在一行的间距,空隙是回车造成的-->
    <div class="box1"></div>
    <div class="box2">111111222 </div>
</div>
</body>
</html>
复制代码