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

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

转载作者：行者123 更新时间：2023-11-28 03:32:18

我的整个代码是如何设置 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>