保持填充使元素变大？

我有一个宽度为70％的元素，它在30％宽度的元素旁边浮动，但是当我添加填充时，它会扩展元素并打破格式，是否有任何方法可以使它仅仅增加内容距离边缘的距离而不是仅仅使它变大？保持填充使元素变大？

2011-03-03 nkcmr

让我们来看看你的代码 –

当您使用border-box模型，填充包括在框的大小。详细信息请参见here。

<!DOCTYPE html> 
<html> 
    <head> 
     <title>padding example</title> 
     <style type="text/css"> 
     .seventy { 
      display: block; 
      float: left; 
      width: 70%; 
      background-color: red; 
     } 
     .thirty { 
      display: block; 
      float: left; 
      width: 30%; 
      padding: 25px; 
      box-sizing: border-box; 
      -webkit-box-sizing: border-box; 
      -moz-box-sizing: border-box; 
      background-color: green; 
     } 
     </style> 
    </head> 
    <body> 
     <div class="seventy">Stuff</div> 
     <div class="thirty">More Stuff</div> 
    </body> 
</html>

来源

2011-03-03 01:01:58 codelark

尽管corrext对盒子大小的支持有点粗略。考虑从其中一个宽度中取一小部分并将其添加到填充中。所以你的2宽度+填充= 100％。 EDIT〜Zeta Twos解决方案将保证25px的差距，这将是一个更好的解决方案。 – sweetroll

@codelark我需要-webkit和-moz吗？ – DBS

我会在元素内创建另一个相同类型的元素（我猜可能是div？），并将其设置为具有25px的填充/边距。

例如：

<div id="wrapper"> 
<div id="width30"> 
</div> 
<div id="width70"> 
    <div id="padding25"> 
    Acctual content here. 
    </div> 
    </div> 
</div> 
</div>

来源

2011-03-03 00:40:19

这是一个超级智能解决方案，人们应该考虑更多。没有粗略的css黑客，没有可能不受支持的浏览器，它遵循干净的容器内容模式。很高兴看到一些KISS CSS（CISS？），因为它很容易过度设计。 – Nol

保持填充使元素变大？

回答

相关问题