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

最新推荐文章于 2023-08-02 11:12:52 发布

cesium vue

最新推荐文章于 2023-08-02 11:12:52 发布

阅读量1k

点赞数

分类专栏： css 文章标签： padding会改变div布局，解决方法

本文链接：https://blog.csdn.net/qq_29384639/article/details/98726524

版权

css 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

问题描述：

初始布局如下图：

代码如下：

   <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，发生如下情形：