在两个元素之间分割空间时的额外像素答案

【问题标题】：Extra pixels when splitting space between two elements在两个元素之间分割空间时的额外像素
【发布时间】：2018-03-08 16:55:30
【问题描述】：

我有一个带有两个孩子的块元素，我希望它们每个占据一半的空间，减去它们之间固定大小的间隙。使用calc() 应该很容易：

var left = document.getElementById("left");
var right = document.getElementById("right");
var info = document.getElementById("info");

var offset = 5;
function toggleStyle() {
  if (offset === 5) {
    offset = 7;
  } else {
    offset = 5;
  }
  info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);";
}

toggleStyle();

#container {
  width: 300px;
  height: 160px;
  background-color: green;
}

#left, #right {
  display: inline-block;
  background-color: blue;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#left {
  margin-right: 5px;
}

#right {
  margin-left: 5px;
}

<div id="info"></div>
<button onclick="toggleStyle()">Toggle</button>
<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

在上面的 sn-p 中，我有一个 300px 的父级，其子级应为 50% - 5px = 145px 宽，每个外加 5px 边距。这意味着两个孩子，加上他们的边距，应该正好占据 300px。当我以这种方式设置时，它们会包装。如果我为每个孩子减去额外的 2 个像素，它们似乎完全填充了空间，即使它们每个仅测量 148 像素（包括边距）。多余的像素是从哪里来的？

【问题讨论】：

标签： css css-calc

【解决方案1】：

它是左右 div 之间的空白。

如果您删除它们之间的空白，它将起作用，即：

<div id="container">
  <div id="left"></div><div id="right"></div>
</div>

工作sn-p：

var left = document.getElementById("left");
var right = document.getElementById("right");
var info = document.getElementById("info");

var offset = 5;
function toggleStyle() {
  if (offset === 5) {
    offset = 7;
  } else {
    offset = 5;
  }
  info.innerHTML = right.style = left.style = "width: calc(50% - " + offset + "px);";
}

toggleStyle();

#container {
  width: 300px;
  height: 160px;
  background-color: green;
}

#left, #right {
  display: inline-block;
  background-color: blue;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#left {
  margin-right: 5px;
}

#right {
  margin-left: 5px;
}

<div id="info"></div>
<button onclick="toggleStyle()">Toggle</button>
<div id="container">
  <div id="left"></div><div id="right"></div>
</div>

【讨论】：

::sigh:: 伙计，有时候我真的很讨厌 HTML。
@Coderer 它通常是最简单的事情导致最严重的问题！ :) 供将来参考，这发生在“inline-block”显示中，但您可以手动删除空格，或者 HTML cmets 也可以工作。例如<div id="left"></div><div id="right"></div>

【解决方案2】：

Flexbox 可以做到这一点

#container {
  width: 300px;
  margin: 1em auto;
  height: 160px;
  background-color: green;
  display: flex;
}

#left,
#right {
  background-color: lightblue;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
  flex: 1;
}

#left {
  margin-right: 5px;
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

CSS Grid 也可以做到这一点。

#container {
  width: 300px;
  margin: 1em auto;
  height: 160px;
  background-color: green;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

#left,
#right {
  background-color: lightblue;
  height: 150px;
  margin-top: 5px;
  margin-bottom: 5px;
}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

【讨论】：