gpt4 book ai didi

html - 如何在 CSS 中设置 div 的内边距

转载 作者:行者123 更新时间:2023-11-28 03:32:18 25 4
gpt4 key购买 nike

我的整个代码是如何设置 div 的间距?它必须在所有设备上顺利运行

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#003380;"></div>
<div class="col-xs-6 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3" style="height:100%;background-color:#66a3ff"></div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 " style="height:100%;background-color:#cce0ff">left</div>
<div class="col-xs-6 " style="height:100%;background-color:#66a3ff">Center</div>
<div class="col-xs-3 " style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</body>

最佳答案

您可以在元素周围包裹另一列,这使得包裹列的填充提供某种边距/间距。

下面的代码是您的目标吗?

.spacing {
padding: 15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div class="container" style="width:100%">
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380;"></div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12 text-center"style="height:100%;background-color:#66a3ff;padding-left: 20px">Top </div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff"></div>
</div>
</div>
<div class="row" style="height:33%">
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#cce0ff">left</div>
</div>
<div class="col-xs-6 spacing">
<div class="col-xs-12" style="height:100%;background-color:#66a3ff">Center</div>
</div>
<div class="col-xs-3 spacing">
<div class="col-xs-12" style="height:100%;background-color:#003380">Right </div>
</div>
</div>
</div>
</body>

编辑:

由于您正在寻找所有方向的间距(不仅是左右),您可以向包装器添加一个额外的类,称为 spacing 和以下 CSS:(请参阅更新的代码片段)

.spacing {
padding: 15px;
}

关于html - 如何在 CSS 中设置 div 的内边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44669816/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com