Bootstrap

padding会改变div布局,解决方法

问题描述:

初始布局如下图:

代码如下: 

   <style>
        body{
            margin: 0;
        }
        .left{
            background: green;
            float: left;
            width: 300px;
        }

        .contain{
            position:absolute;
            background: red;
            float: right;
            margin-left: 300px;
            top: 0;
            right: 0;
            padding: 20px;
            box-sizing: border-box;
        }
    </style>

 

<body>
    <aside class="left">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Culpa, est aperiam dicta animi iste quidem totam eligendi qui iusto. Ad quod quia iste omnis ex veniam distinctio ratione vitae sed!
    </aside>
    <div class="contain">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos consectetur tempore, quidem voluptas modi nobis, unde aspernatur, veniam asperiores fuga saepe! Minima expedita at facilis accusantium itaque repellat officiis id.
    </div>
</body>

左侧盒子添加 内边距padding:20px,发生如下情形:

左侧盒子变形!!!

解决办法: 

继续给左侧盒子增加  box-sizing: border-box;

问题解决。 

;