我试图让这些盒子挨着放，但由于某种原因，它在蓝色盒子上方造成了巨大的间隙。
此外，您将如何消除蓝色和绿色框之间的间隙？
提前感谢：(
body,
header,
h1,
div {
margin: 0;
padding: 0;
}
header {
width: 100%;
height:100px;
background-color: red;
}
h1 {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background-color: green;
}<body>
<header>
<h1>text</h1>
<div></div>
</header>
</body>将vertical-align: middle;添加到h1和div。我用浮子去除了蓝色和绿色盒子之间的间隙。
body,
header,
h1,
div {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100px;
background-color: red;
}
h1 {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
vertical-align: middle;
float: left;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background-color: green;
vertical-align: middle;
clear:left;
}<header>
<h1>text</h1>
<div></div>
</header>此外，您还可以将flex用于标头
body,
header,
h1,
div {
margin: 0;
padding: 0;
}
header {
width: 100%;
height: 100px;
background-color: red;
display:flex;
}
h1 {
display: inline-block;
width: 100px;
height: 50px;
background-color: blue;
}
div {
display: inline-block;
width: 100px;
height: 50px;
background-color: green;
}<header>
<h1>text</h1>
<div></div>
</header>