Question

我将margin和padding元素的div和body设置为0，但我看到div存在之间有一些偏差仍然。我也使用内联块。

这是我的例子：

.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>

为什么会这样？我该如何解决？

Answer 1

使用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>

Answer 2

因为您使用processing_function_with_Pool属性，浏览器会自动在它之间添加一些空格。阅读here了解更多信息。

您可以轻松修复它，例如添加一个浮点数：

inline-block

Answer 3

这是由于HTML标记中的空格和换行符导致此问题。有两种方法可以解决＆＃34;问题＆＃34;：

从代码中删除换行符和空格
将父元素的字体大小设置为＆＃39; 0＆＃39;

尝试将代码用作单行。它不会显示您设置宽度70％，30％的元素的事件或使用 float 属性

Answer 4

这是由于“线块”元素之间的换行符，导致这些空格。

阻止这些操作的一种方法是将此类元素的结束标记向下移动到下一行，然后将下一个开头标记直接放在同一行中，在你的例子中这样：

{{1}}

https://jsfiddle.net/7voowbf7/1/

为什么html元素在我的代码中仍有偏移量？

4 个答案:

剥离空间

纯CSS：