keep padding from making the element bigger?

2019-01-14 11:18发布

站内问答 / HTML/CSS
1045 2 5

I have an element with a 70% width, and it is floating beside an element with 30% width, but when I add 25px of padding it expands the element and breaks the format, is there any way to make it just increase the contents distance from the edge as opposed to just making it bigger?

2条回答
神经病院院长
2楼-- · 2019-01-14 11:50

When you use the border-box model, the padding is included in the box size. See here for details.

<!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>
查看更多
0人赞 添加讨论(0) 举报
Explosion°爆炸
3楼-- · 2019-01-14 12:02

I would create another element of the same type (may I guess it's a div?) inside the element and set that one to have a padding/margin of 25px.

For example:

<div id="wrapper">
 <div id="width30">
 </div>
 <div id="width70">
  <div id="padding25">
   Acctual content here.
  </div>
  </div>
 </div>
</div>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)