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

Question

我想为div标签添加背景颜色。现在背景颜色只出现在div的中心。我想显示整个div标签 我有一个外部div框，并标记为'b'。在框div标签我有emp div.within 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 -->