边框和内容之间奇怪的空白

2022-01-25 09:37:30 标签 htmlcss

我在chrome中看到div的边框和导航之间只有特定px(屏幕大小)的空白。我在小提琴上也看到了它,所以我没有任何额外的代码。http://jsfiddle。net/u13f2xwd/

同样的情况也发生在stackoverflow的运行代码片段中,只有当我将其展开到整个页面时,才会看到空白。

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
div{
  min-height: 100vh;
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
}
nav{
  background: black;
  height: 11vh;
}
<div>
  <nav>
  </nav>
</div>

问题是:

border: 0.5vw solid red;

这不会给你一个整数,因为它反锯齿的边界与白色DIV,你可能会看到更多的橙色比白色。

我已经想出了一个hack,有两个单独的div,一个为nav, div背景是黑色的,所以你的边框反锯齿为黑色而不是白色。

小提琴:http://jsfiddle。net/dg45wfc8/

*{
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
}
.content-div {
  min-height: calc(((100vh - 11vh) - 0.5vw));
  border: 0.5vw solid red;
  width: 100%;
  box-sizing: border-box;
  
  border-width: 0 0.5vw 0.5vw 0.5vw;
  border-style: solid;
  border-color: red;
}
nav{
  background: black;
  height: 11vh;
}
.nav-div {
 border-width: 0.5vw 0.5vw 0 0.5vw;
 border-style: solid;
 border-color: red;
 background: black;
}
<div class="nav-div">
  <nav>
  </nav>
</div>
<div class="content-div">>
</div>

问题出在这台机器上vw you are using in it. When I change你正在使用它。当我把它改成px the white gap gets eliminated.

白色间隙被消除。

*{
  padding: 0px;
  margin: 0px;
  font-size: 0px;
  line-height: 0px;
}
.div{
  border: 5px solid red;
  width: 100%;
  box-sizing: border-box;
}
nav{
  background: black;
  height: 11vh;
}
<div class="div">
  <nav>
  </nav>
</div>

阅读全文

▼ 版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说 cuoshuo.com —— 程序员的报错记录

部分内容根据CC版权协议转载;网站内容仅供参考,生产环境使用务必查阅官方文档

辽ICP备19011660号-5

×

扫码关注公众号:职场神器
发送: 1
获取永久解锁本站全部文章的验证码