html - 用于为 div 标签添加背景颜色的 css

Question

我想为div标签添加背景色。现在背景色只出现在div的中心。我想为整个div标签显示它我有一个外部 div 框并将其标记为“b”。使用框内 div 标记我有 emp div。在 emp div 中我创建了 emp1 div，我想显示背景颜色。我的问题是我想要背景颜色，就像我用绿色标记的那样，但现在它显示在中心，我是如何用红色绘制的。

.box{
  height: 400px;
 margin-top:40px;
  text-align: center;
}  
.emp,.cli,.doc{
  position:relative;
   
  height:175px;

  width: 200px;
 
  border-style: solid;
  border-width: 1px;
  border-color: black;
  padding: 10px 10px 0 10px;
  display: inline-block;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}
.emp1,.cli1,.doc1{
 position:relative;
  
 height:20px;
  background: #1e5799;
 text-align:center;
 font-size:13px;
 color:#fff;
}

    <div class="box">
         <div class="emp">
            <div class="emp1">
                Employees
            </div>  <!--end of emp1 div -->
         </div>  <!--end of emp div --> 
         <div class="cli">
             <div class="cli1">
                Clients
            </div>  <!--end of cli1 div -->
         </div>  <!--end of cli div --> 
         <div class="doc">
             <div class="doc1">
                Documents
            </div>  <!--end of doc1 div -->
         </div>  <!--end of doc div -->  
     </div> <!--end of box div -->

请全屏运行。

Answer 1

您应该删除 .emp、.cli、.doc 的填充如果你想要间距，请加上你的标题:

.box{
  height: 400px;
   margin-top:40px;
  text-align: center;
}  
.emp,.cli,.doc{
  position:relative;
  height:175px;
  width: 200px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
  display: inline-block;
  text-align: left;
  margin-left: 20px;
  margin-right: 20px;
}
.emp1,.cli1,.doc1{
   position:relative;
   height:20px;
    background: #1e5799;
   text-align:center;
   font-size:13px;
   color:#fff;
    padding: 10px;
}

    <div class="box">
         <div class="emp">
            <div class="emp1">
                Employees
            </div>  <!--end of emp1 div -->
         </div>  <!--end of emp div --> 
         <div class="cli">
             <div class="cli1">
                Clients
            </div>  <!--end of cli1 div -->
         </div>  <!--end of cli div --> 
         <div class="doc">
             <div class="doc1">
                Documents
            </div>  <!--end of doc1 div -->
         </div>  <!--end of doc div -->  
     </div> <!--end of box div -->