如何让边框正常工作html答案

【问题标题】：How can I get a border to work correctly html如何让边框正常工作html
【发布时间】：2020-04-26 16:57:34
【问题描述】：

所以我正在像这样在 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

【问题讨论】：

内边距是顶部 100 像素，左侧 20 像素。这在我看来是正确的。你在期待什么？
顺时针工作的速记属性padding: top right bottom left
填充是正确的，但如果您查看图像，它的边框不是我想要的位置。
同样的填充概念适用于边距
我想看多久就看多久。根据您提供的信息，边界就在应有的位置。问题是你没有告诉我们你期望边界应该在哪里/如何。根据您提供的信息，我可以说一切都很好

标签： html css border padding

【解决方案1】：

如果填充有四个值：

padding:10px 5px 15px 20px;

这意味着：

 - top padding is 10px 
 - right padding is 5px 
 - bottom padding is 15px 
 - left padding is 20px

边界半径也类似：

border-radius: 15px 50px 30px 5px;

（第一个值适用于左上角，第二个值适用于右上角，第三个值适用于右下角，第四个值适用于左下角）

所以你可以试试这个：

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

【讨论】：

【解决方案2】：

试试这个，这对我有用

#menu p{
        text-align: center;
        margin: 0 auto;
        border: 1px solid black;
        padding: 50px;
        border-radius: 20px;
        width: 300px;
    }

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

【讨论】：

【解决方案3】：

根据 CSS 框模型，边框位于边距和内边距之间。 CSS Box Model

我不确定你希望你的设计是怎样的，但是，你可以试试你在填充，边距中使用的速记属性，像这样：

#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 ;
}

我希望这是你想要的。

【讨论】：

【解决方案4】：

试试这些值：

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

【讨论】：

【解决方案5】：

下面是一个简单的例子。如需进一步说明，请访问w3schools

<p class="round3">Roundest border</p>

p.round3 {
  border: 2px solid red;
  border-radius: 12px;
}

【讨论】：