<分区>
<分区>
所以，这是一个重复的问题: space between an inline-block element and a block element .我只是在搜索网站时用错了问题。
我在 jsfiddle 中放置了我的站点代码
这是我的 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* 标签时，section 元素恢复正确显示，其中没有空格。但是，一旦我在其中放置一个 h 标签，左部分几乎一直移动到底部，或者如果我向左部分添加边框(我在另一个论坛上找到的)它会将右部分向下推在它下面。
我唯一能发现的是，当通过 chrome 开发工具查看时:
webkit-margin-before:.83em;
webkit-margin-after:.83em;
任何人都可以看到我在这方面做错了什么吗？
此外，如果我只是将两个部分(我可以将其放入文章标签？)更改为 float :左；
我需要插入什么类型的代码才能让它看起来像现在这样？
最佳答案
部分默认为 vertical-align: baseline;
#main section {
display:inline-block;
vertical-align:top; /* Add this to overide */
}
关于html - header 标签将父元素向下推，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31164435/