html - 如何在不同的浏览器显示尺寸下创建边框顶部宽度大于内容的框？

Question

我创建了一个具有不同顶部宽度的盒子，如下图所示。 但是，出于某种原因，当我将浏览器的大小调整为 50% 时，内容的宽度超出了顶部边框的宽度。

我是通过下面的CSS代码来实现这个效果的

p.header{
width: 72%;
margin: 0% 15%;
background-color: lightblue;
border-left: 4px solid darkblue;
margin-bottom: 0px;
text-decoration: underline;
padding-left: 4px;
}

ol{
    border: none;
    background-color: whitesmoke;
    border-left: 4px solid darkblue;
    width: 68.7%;
    margin: 0% 15%;
    padding-top: 10px; 
}

为了克服这个问题，我尝试设置 border-top-width 但它会产生一种倾斜的效果。我也搜索过 SO 但无济于事。

任何有关如何在调整浏览器大小时实现此目的的帮助，将不胜感激。

Answer 1

此行为的发生是因为元素的 box-sizing。边距百分比是元素宽度的百分比，而不是页面宽度。

尝试将 box-sizing: border-box; 添加到您的 p 和 ol