html - 如何将边框与两个 div 之间的背景色对齐？

Question

考虑 plunker

这是CSS

.border {
 display: inline;
 height: 20px; 
 padding-top: 10px;
 padding-bottom: 10px;
 padding-left: 40px;
 padding-right: 40px;
 border: 3px solid #eee;
 font-size: 1.4em;
}

.background {
  display: inline;
  height: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 40px;
  padding-right: 40px;
  background-color: rgba(74, 144, 226, 0.8);
  font-weight: bold;
  font-size: 1.4em;
  border: 0px solid #eee;
}

这是两个 div 的样子

如您所见，边框未与背景颜色对齐。

这是什么原因？

Answer 1

那是因为在 div 之外添加了边框。如果你想对齐它，你可以添加 box-sizing: border-box; 或使用 box-shadow inset 而不是 border。