Question

这是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;
}

这两个divs看起来像

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

这是什么原因？

Answer 1

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

Answer 2

我使用box-shadow来解决此问题

.margin_css {
  margin: 50px;
  
}

.border {
  display: inline;
	height: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 40px;
	padding-right: 40px;
  font-size: 1.4em;
     -webkit-box-shadow:inset 0px 0px 0px 3px #eee;
    -moz-box-shadow:inset 0px 0px 0px 3px #eee;
    box-shadow:inset 0px 0px 0px 3px #eee;
}

.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;
}

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <div class="margin_css">
    Margin
  </div>

  <div class="border">
    border
  </div>
  <div class="background">
    background
  </div>
  
   <div class="margin_css">
    Margin
  </div>
  

</html>

Answer 3

这是w3schools。它解释了实际计算高度和宽度的方法。

元素的总宽度应按如下方式计算：

总元素宽度=宽度+左边距+右边距+左边框+右边框+左边距+右边距

元素的总高度应按如下方式计算：

总元素高度=高度+顶部填充+底部填充+顶部边框+底部边框+顶部边距+底部边距

您可以使用css box-sizing属性告诉浏览器在设置的高度和宽度中不仅包含元素内容。设置box-sizing: border-box意味着浏览器将包含边框中的所有内容，作为设置宽度和高度的一部分。默认值为box-sizing: content-box，它排除了填充，边距和边框的额外宽度。

Answer 4

如果你想要完美，边框尺寸应该从背景填充中删除，如下所示

.border {
 display: inline;
 height: 20px; 
 padding-top: 7px;
 padding-bottom: 7px;
 padding-left: 37px;
 padding-right: 37px;
 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;
}

		<br><br>
        <div class="border"></div>
        <div class="background"></div>

Answer 5

您没有使用具有修复高度和宽度的i元素。如果你使用填充来创建元素的高度，那么你必须注意，如果你在一个元素中使用额外的属性会增加你的身高，那么你必须用你给出的填充来管理它。

在.border { display: inline; height: 20px; padding-top: 7px; padding-bottom: 7px; padding-left: 40px; padding-right: 40px; border: 3px solid #eee; font-size: 1.4em; box-sizing: border-box; }中使用此代码，它可以正常使用。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="position:relative;">
  <div class="fill"></div>
  <img class="mask" src="https://static.licdn.com/scds/common/u/img/pic/pic_profile_strength_mask_90x90_v2.png"></img>
</div>

.fill {
    position: absolute;
    top: 90px;
    left: 0;
    height: 0px;
    width: 90px;
    background-color: green;
    overflow:hidden;
}
.mask {
    display: block;
    height: 90px;
    left: 0;
    position: absolute;
    top: 0;
    width: 90px;
    overflow:hidden;
}

function fillMeter(percent) {
    var pixels = (percent/100) * 90;
    $(".fill").css('top', (90-pixels) + "px");
    $(".fill").css('height', pixels + "px");
}

fillMeter(82);

如何在两个div之间对齐边框与背景颜色？

5 个答案: