Question

我已经写了一个非常基本的HTML和CSS页面来测试我的响应式网页设计技巧，但填充的计算出错了，我无法弄清楚为什么，人们的任何帮助将不胜感激。

下面我添加了我的代码供您查看。我有一个“主要”，其中包含“部分”和“旁边”。里面两个都是两个不同大小的盒子。我计算了框的大小和边距，但填充不能正常工作。我按目标/上下文=结果计算填充，在这种情况下，第一个框是25px填充/ 500px = 0.05（5％），而第二个框是25px / 300px = 0.08333333（8.333333％）。但是，这不会导致25px填充，而是会产生更大的填充。当我查看谷歌Chrome开发者工具时，它告诉我第一个框的填充现在是56.875像素，第二个框是94.797像素。

我一直试图解决这个问题，现在尝试不同的事情，但无法解决这个问题。

对此的任何帮助将不胜感激。代码如下。

body, section, aside, p {  
    margin: 0;  
    padding: 0;  
}  

main {  
    width:90%; /* viewport is 1264px wide, 90% width is 1137.590px */  
    background-color: lightgreen;  
    min-height: 1000px;  
    margin: 0 auto;  
}  

section {  
    height: 500px;  
    width: 44.067133%; /* 500/1137.590 */  
    background-color: green;  
    float: left;  
    margin: 04.398736%; /* 50.031/1137.590 */  
    padding: 5%; / 25/500 */  

}

aside {  
    height: 300px;  
    width: 26.434279%; /* 300/1137.590 */  
    background-color: blue;  
    float: right;  
    margin: 04.398736%; /* 50.031/1137.590 */  
    padding: 8.3333333%; /* 25/300 */  
   color: lightblue;  
}

<body>
  <main>

    <section class="box-green">
      <p>This is a green box</p>
    </section>

    <aside class="box-blue">
      <p>This is a blue box</p>
    </aside>

  </main>
</body>

Answer 1

以百分比计算填充时，该数量是按包含块的宽度计算的，而不是高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

Answer 2

当以百分比给出时，填充基于包含元素而不是元素本身的高度。

Answer 3

虽然这不是编写响应式代码的正确方法，但只是为了让您了解填充％不是根据div大小确定的，而是根据屏幕大小确定的。您使用4.398736％的保证金也会在两个div的左侧和右侧添加。加上.section的两侧的填充量为5％，并且.aside两侧的填充量为8.33333％。它使总规模达到115.96555％。

如果您希望两个div（部分和旁边）并排排列，请理解。使用下面写的css样式。

.section {
height: 500px;
width: 44.067133%;
background-color: green;
float: left;
margin: 02.199736%;
padding: 5%;
display: inline-block;
}

.aside {
height: 300px;
width: 26.434279%;
background-color: blue;
float: right;
margin: 02.199736%;
padding: 5%;
color: lightblue;
display: inline-block;
}

希望这会有所帮助..

CSS：浏览器无法正确计算填充％

3 个答案: