为什么padding:0时,border 与 content 之间存在缝隙?

最开始不加边框时,内部元素跟父容器还严丝合缝,但是一旦加了 border 以后,border 和 content 之间就出现了一条小缝隙,不知是什么原因,css 如下:

没加边框:

.bar-content {
    width: 100%;
    height: 40px;
    background-color: black;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.navigation-btn {
    flex: 1;
    height: 40px;

    line-height: 40px;
    text-align: center;

    color: whitesmoke;

    transition:background-color .2s
}

image.png
加边框:

.bar-content {
    border: 2px solid green;
    width: 100%;
    height: 40px;
    background-color: black;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.navigation-btn {
    flex: 1;
    height: 40px;

    line-height: 40px;
    text-align: center;

    color: whitesmoke;

    transition:background-color .2s
}

image.png
虽然看不清楚,但是边框和内容之间有一条黑线。
盒模型:
image.png

阅读 4.3k
2 个回答

可能是 HTML 绘制的时候有点色偏。

如果把 border 改大一点,比如 5;或者放大显示在 200%;应该就看不见那么黑边了(但不是绝对,有时候刷刷还会出来,刷刷又没了)。

会不会因为width:100% 和border导致内容溢出,撑开有个水平滚动条?
加box-sizing: border-box;看看

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题