这就是计划，我有一个选项卡包装器，里面有一个选项卡包装器顶部，里面有三个成行显示的部分。为什么它们之间有空格？？
html
<html>
<head>
<title>Informação pessoal</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
</head>
<body>
<div class="tab-wrapper">
<div id="tab-wrapper-top">
<div id="tab-wrapper-left">
Left
</div>
<div id="tab-wrapper-middle">
Middle
</div>
<div id="tab-wrapper-right">
Right
</div>
</div>
<div class="separator"> Seperator </div>
<div id="tab-wrapper-bottom"> Bottom wrapper</div>
</div>
</body>
</html>
CSS
/* Tabs */
.tab-wrapper {
position: absolute;
top: 90px;
width: 98%;
margin: 0 auto auto;
-webkit-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow: -3px 0px 5px 0px rgba(50, 50, 50, 0.75);
}
.tab-wrapper label {
margin: 5px 10px 5px;
}
.tab-wrapper input {
margin: 5px 10px 5px;
}
.tab-wrapper select {
margin: 5px 10px 5px;
}
.tab-wrapper textarea {
margin: 5px 10px 5px;
width: 90%;
}
#tab-wrapper-top {
display: block;
}
#tab-wrapper-left {
display: inline-block;
width: 43%;
background-color: gray;
}
#tab-wrapper-middle {
display: inline-block;
width: 14%;
background-color: blue;
}
#tab-wrapper-right {
display: inline-block;
background-color: green;
}
.separator {
display: block;
height: 30%;
width: 100%;
background-color: red;
}
最佳答案
HTML 将换行符视为空格。连续的换行符会折叠成一个空格。尝试一下
<div>Left</div><div>
Middle</div><div>
Right</div>
相反。请注意结束/开始标记如何彼此直接相邻。
就目前情况而言，你已经
<div>Left</div>[linebreak][tab][tab]<div> etc...
换行符/制表符折叠成一个等效的空白字符，并将您的 div 分开。
关于html - 为什么这些div之间有空格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25269575/