html - CSS 子元素产生父元素全宽的边距

Question

为某些文本构建一个包含程式化容器的叠加层，但是该容器似乎产生了一个边距，当与元素的正常宽度结合使用时，该边距占据了整个父元素的宽度。根据 chrome 开发工具，它是 .flipcontainer 元素导致的。

这真的很奇怪，我不明白为什么会这样。

例如，如果我想将内容放在容器的右侧，我将无法这样做，因为会产生边距。

.flipcontainer {
  height: 230px;
  width: 150px;
}
.flipcalender {
  border: 1px solid #dddddd;
  border-radius: 25px;
  margin: 0 auto;
  margin-top: 0.2px;
  background: linear-gradient(white, #f4f2f2);
}
.mmouter {
  width: 100%;
  height: 100%;
  border: 1.5px solid #dddddd;
}
.mmmiddle {
  width: 98%;
  height: 98%;
}
.mminner {
  width: 98%;
  height: 98%;
  background: linear-gradient(white, #f4f2f2);
  position: relative;
}
.mmbreaker {
  width: 99%;
  background-color: white;
  height: 2px;
  position: absolute;
  z-index: 1;
  top: 115px;
}
#mmlightbox {
  display: block;
  width: 400px;
  height: auto;
  position: fixed;
  top: 30%;
  left: 40%;
  z-index: 999;
  background-color: white;
  padding: 10px 20px 10px 0px;
  /* margin-right: 239px; */
  margin-top: -100px;
  margin-left: -150px;
  border: solid 2px #f21c0a;
}

<div id='mmlightbox'>
  <div class='flipcontainer'>
    <div class='flipcalender mmouter'>
      <div class='flipcalender mmmiddle'>
        <div class='flipcalender mminner'>
          <p class='daysremaining'></p>
          <p>days</p>
          <div class='mmbreaker'></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

将 float: right; 添加到 .flipcontainer css 中，如下所示:

.flipcontainer {
    height: 230px;
    width:150px;
    float: right;
}

Here is the JSFiddle demo

您看到的边距是因为您将宽度指定为“150px”。