为什么这些 1px 厚的 div 的厚度不同？答案

【问题标题】：Why are these 1px thick divs different thicknesses?为什么这些 1px 厚的 div 的厚度不同？
【发布时间】：2022-01-08 22:27:48
【问题描述】：

为什么我的网站这部分的两行在像素高度相同时大小不同？请检查下面的sn-p。

还有哪些其他创建分区分隔线的好方法？

body {
  margin: 0px;
}

p,
a,
h1,
h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

.seg-2-line {
  height: 1px;
  background: hsl(240deg 19% 88%);
}

<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

【问题讨论】：

我找不到任何问题。
我也没有复制，无论是 96dpi 还是 192dpi (200%)。
我在 Chrome 中看到了它。 “run sn-p”中的顶部是底部的两倍厚或亮度是底部的两倍
我为您恢复了较短的版本，因为它在较大的文本中不可见

标签： html css line

【解决方案1】：

尝试使用<hr>标签，并应用CSS

【讨论】：

【解决方案2】：

通常你会使用边框来做水平线？

body {
  margin: 0px;
}

p,a,h1,h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51,82,124,1) 0%, rgba(18,59,114,1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

.seg-2-line {
  height: 1px;
  border-bottom: 1px solid hsl(210deg 18% 87%);
  
}

<div class="seg-2">
  <div class="seg-2-line seg-2-sizeing"></div>
  <div class="seg-2-flex-container seg-2-sizeing">
    <div class="seg-2-text">
      <h2>Secure cleanup with one click</h2>
      <p>HI, HI</p>
    </div>
  </div>
  <div class="seg-2-line seg-2-sizeing"></div>
</div>

【讨论】：

这也是我会做的方式，但也会完全删除seg-2-line，并且只在flex-container 上有一个边框。为此，您还必须将容器 padding: 15px auto 更改为 margin: 15px auto;

【解决方案3】：

为什么不使用你想要的 hr？

body {
  margin: 0px;
}


hr { width: 60vw;  }

p,
a,
h1,
h2 {
  margin: 0px;
  color: white;
}

.seg-2 {
  background: linear-gradient(358deg, rgba(51, 82, 124, 1) 0%, rgba(18, 59, 114, 1) 100%);
  padding: 5% 0px;
}

.seg-2-sizeing {
  width: 60%;
  margin: auto;
}

.seg-2-flex-container {
  display: flex;
  justify-content: space-around;
  margin: 15px auto;
}

.seg-2-text {
  flex-basis: 250px;
}

.seg-2-text p {
  margin-top: 10px;
}

<div class="seg-2">
  <hr/>
  <div class="seg-2-flex-container seg-2-sizeing"></div>
    <hr/>
</div>

【讨论】：