时间戳

首页 > 解决方案 > 当我向 div 添加 margin-top 和 margin-left 时，页面大小水平增加

html - 当我向 div 添加 margin-top 和 margin-left 时，页面大小水平增加

问题描述

我使用引导程序创建了一个 3 x 3 列的 div，所以当我向 div 添加 margin-left 和 margin-top 时，页面大小会水平增加。我希望页面大小在移动 div 时保持不变。

.col-4 {
  background-color: black;
  width: 100px;
  height: 100px;
  margin: 10px 0 0 10px;
}

.container {
  margin: 100px 0 0 300px;
}
<body>
    <div class="container">
        <div class="row">
            <div class="col-4" id="square_1"></div>
            <div class="col-4" id="square_2"></div>
            <div class="col-4" id="square_3"></div>
        </div>
        <div class="row">
            <div class="col-4" id="square_4"></div>
            <div class="col-4" id="square_5"></div>
            <div class="col-4" id="square_6"></div>
        </div>
        <div class="row">
            <div class="col-4" id="square_7"></div>
            <div class="col-4" id="square_8"></div>
            <div class="col-4" id="square_9"></div>
        </div>
    </div>
</body>

标签： htmlcss

解决方案

到目前为止，无论我用你的代码尝试过什么，水平尺寸都没有改变。但是，如果您能解释一下您正在努力实现的问题所在，我可能会提供帮助。

推荐阅读