<分区>
html - 为什么 html 元素在我的代码中仍然有偏移量？
我将 div 和 body 元素的 margin 和 padding 设置为 0 但我发现我的 div 之间仍然存在一些偏移。我也使用内联 block 。
这是我的例子:
.background{
padding:0;
margin:0;
background-color: yellow;
}
.page{
background-color: darkolivegreen;
width:80%;
padding:0;
margin:0;
}
.title-boss-offset{
background-color: antiquewhite;
width:70%;
}
.title-boss {
width: 29%;
background-color: aqua;
}
.title-boss-offset, .title-boss{
border-width:0;
display:inline-block;
margin:0;
padding:0;
height: 15em;
}<body class="background">
<div class="page">
<div class="title-boss-offset"></div>
<div class="title-boss"></div>
</div>
</body> 
为什么会这样？我该如何解决？
最佳答案
请务必在使用display: inline-block 时移除元素之间的空格。或者查看纯 CSS 解决方案。
剥离空格
但这不会(请注意，我向父级添加了一个 line-height:0 以去除底部边距):
.background{
padding:0;
margin:0;
background-color: yellow;
}
.page{
background-color: darkolivegreen;
width:80%;
padding:0;
margin:0;
line-height:0;
}
.title-boss-offset{
background-color: antiquewhite;
width:70%;
}
.title-boss {
width: 30%;
background-color: aqua;
}
.title-boss-offset, .title-boss{
border-width:0;
display:inline-block;
margin:0;
padding:0;
height: 15em;
word-spacing: normal
}<body class="background">
<div class="page">
<div class="title-boss-offset"></div><!--
--><div class="title-boss"></div>
</div>
</body>纯 CSS:
您可以通过将父样式设置为 display: table; 来利用表格显示去除单元格之间的空间
重要的部分是:
.parent{
display: table;
width: 100%;
table-layout: fixed;
line-height: 0;
word-spacing: -2em; /*cross-browser quirks*/
}
.children{
display: inline-block;
word-spacing: normal; /*cross-browser quirks*/
}
.background{
padding:0;
margin:0;
background-color: yellow;
}
.page{
background-color: darkolivegreen;
width:80%;
padding:0;
margin:0;
display:table;
table-layout:fixed;
word-spacing: -2em;
line-height:0;
}
.title-boss-offset{
background-color: antiquewhite;
width:70%;
}
.title-boss {
width: 30%;
background-color: aqua;
}
.title-boss-offset, .title-boss{
border-width:0;
display:inline-block;
margin:0;
padding:0;
height: 15em;
word-spacing: normal
}<body class="background">
<div class="page">
<div class="title-boss-offset"></div>
<div class="title-boss"></div>
</div>
</body>关于html - 为什么 html 元素在我的代码中仍然有偏移量？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44543470/