html - 为什么上边框和左边框不被视为单线？

Question

div {
  border: 1px solid red;
}
.one {
  height: 20px;
  width: 20px;
}
.two {
  height: 30px;
  width: 30px;
}

<div class="one">
  <div class="two">
  </div>
</div>

在 DOM 树中，.two div 是 .one div 的子元素。这种父子关系与两个元素的显示无关。

根据下图，我没有看到顶部和左侧边框为单线。为什么较小的框更靠近屏幕中心？

注意:在计算机图形世界中，显示的左上角是屏幕的中心。 html/css 初学者

Answer 1

这两行没有连接在一起，因为.two元素在 .one 的内部元素。

您可以将带边框的 div 视为四周有墙的房间，在本例中，它包含另一个四周有墙的房间。您似乎期望发生的事情是将两个“房间”放置在彼此顶部，而在 HTML/CSS 中，“房间”放置在内部 彼此。如果你想让线条连接起来，你可以在 .two 上使用负边距。像这样的元素:

.two {
    height: 30px;
    width: 30px;
    margin: -1px 0 0 -1px;
}

这样，.two元素看起来像是放在另一个元素之上