Question

所以，这是一个重复的问题： space between an inline-block element and a block element。我只是在搜索网站时说错了我的问题。

中提供了我的网站代码

这是我的HTML：

<div id="main">
    <section class="section-left">
        <header><h1>My Name</h1></header>
        <content>
            <p></p>
        </content>
    </section><section class="section-right">
        <header><h3>Hello World!</h3></header>
        <content>
            <p></p>
        </content>
    </section>
</div>

这是我的css：

#main {
    background-color:blue;
    height:92%;
}

#main section {
    display:inline-block;
}

.section-left{
    width:30%;
    height:100%;
    background-color:red;
}

.section-right{
    width:70%;
    height:100%;
    background-color:orange;
}

当我取出h *标签时，剖面元素会恢复正常显示，但没有空格。但是，只要我在其中放置了ah标签，左边的部分或者几乎一直移动到底部，或者如果我向section-left添加边框（我在另一个论坛上找到）它会向右推低于它。

我能找到的唯一一件事是，通过chrome dev工具查看是：

webkit-margin-before:.83em;
webkit-margin-after:.83em;

任何人都可以看到我做错了吗？

另外，如果我只是为两个部分（我可以放入文章标签？）更改它浮动：左;

我需要插入什么类型的代码才能使它看起来像现在这样？

Answer 1

部分默认为vertical-align: baseline;

#main section {
    display:inline-block;
    vertical-align:top;  /* Add this to overide */
}

标题标记将父元素向下推

1 个答案: