前端进阶html+css08----多个带margin的元素排列问题

weixin_43795761

已于 2023-08-08 23:10:02 修改

阅读量97

点赞数

文章标签： html css css3

于 2023-04-21 15:54:30 首次发布

本文链接：https://blog.csdn.net/weixin_43795761/article/details/130290515

版权

解决统一设置子元素margin-right的时候，如何取消最后一个元素的margin-right。

<style>
        .container{
            background-color: gray;
            width: 602px;
            height: 400px;       
        }
        .box{
            background-color: aquamarine;
            width: 200px;
            height: 200px;
            float: left;
            margin-right: 1px;
        }
        .content{
            margin-right: -1px;
         
        }
        .font{
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="font">conent-width = box-width（200)*3 + box-margin（3） = 603</div>
        <div class="font";>container-width（602） = content-width（603） + content-margin（-1） = 602</div> 
    </div>
    </div> 
</body>