html - 如何从边框到边框填充整个日历标题？

例如，我无法用红色填充所有标题，因为它仅填充文本区域，并且需要从左上角灰色区域填充到开始几天。
这是html：

  <div id="calendar-container">
     <div id="calendar-header">
       <span id="calendar-month-year"></span>
       <div id="calendar-dates"></div>
     </div>
  </div>

和CSS：

  #calendar-container{
  margin-left: 50px;
  margin-top: -50px;
  padding: 15px;
  width: 280px;
  height: 300px;
  text-align: center;
  font-size: 19px;
  color: #e4e4e5;
  font-family: Calibri;
  background: #323439;
}
#calendar-header{
  background-color: red;
  height: 30px;
}
#calendar-container>div{
  padding: 0;

  margin-bottom: 10px;
}
#calendar-dates>table>tr>td{
  font-size: 14px;
  padding: 10px;
}

现在我的结果是：

最佳答案

您有两种选择：

1。

从#calendar-container删除填充，并将其添加到#calendar-dates。

  #calendar-container {
    margin-left: 50px;
    /*margin-top: -50px;*/
    /*padding: 15px;  */
    width: 280px;
    height: 300px;
    text-align: center;
    font-size: 19px;
    color: #e4e4e5;
    font-family: Calibri;
    background: #323439;
  }
  #calendar-header {
    background-color: red;
    height: 30px;
  }
  #calendar-container>div {
    padding: 0;
    margin-bottom: 10px;
  }
  #calendar-dates {
    padding: 15px;
  }
  #calendar-dates>table>tr>td {
    font-size: 14px;
    padding: 10px;
  }

<div id="calendar-container">
  <div id="calendar-header">
    <span id="calendar-month-year">May 2015</span>
    <div id="calendar-dates">dates dates dates dates dates dates dates</div>
  </div>
</div>

2。

向#calendar-month-year的-15px添加负边距，使其与父级的填充重叠。

#calendar-container {
  margin-left: 50px;
  /*margin-top: -50px;*/
  padding: 15px;
  width: 280px;
  height: 300px;
  text-align: center;
  font-size: 19px;
  color: #e4e4e5;
  font-family: Calibri;
  background: #323439;
}
#calendar-header {
  background-color: red;
  height: 30px;
  margin: -15px;
}
#calendar-container>div {
  padding: 0;
  margin-bottom: 10px;
}
#calendar-dates>table>tr>td {
  font-size: 14px;
  padding: 10px;
}

<div id="calendar-container">
  <div id="calendar-header">
    <span id="calendar-month-year">May 2015</span>
    <div id="calendar-dates">dates dates dates dates dates dates dates</div>
  </div>
</div>