html - 如何让边框正常工作 html

Question

所以我像这样在 div 周围添加了一个边框

#menu{
  margin: 0px;
  padding: 100px 0px 0px 20px;
  float: left;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-radius: 0px 10px 10px 0px;
}

<div id="menu">
  <p>Hello</p>
</div>

但是边框忽略了填充或图像上可以看到的东西 Image

Answer 1

根据 CSS 盒模型 边框正好位于边距和填充之间。 CSS Box Model

我不确定你到底希望你的设计如何，但是，你可以试试你在 padding 和 margin 中使用的简写属性，像这样:

#menu{
  margin: 100px 0px 0px 20px;
  padding: 5px;
  float: left;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  border-top: 1px solid black;
  border-radius: 0px 10px 10px 0px ;
}

希望这就是你想要的。