html - 如何确保高度: 0; includes padding as well?

Question

我已经有了这个简洁的 CSS Accordion ，它工作得很好，直到我尝试向 .accordBody 添加填充或边距。

Accordion 的整个“魔力”在于将 .accordBody 的高度从 0 增加到 125px在相应 .accordHeader 的 :focus 上。

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}

.accordion .accord .accordHeader,
.accordion .accord .accordBody {
  background-color: #fff;
  padding: 1rem;
}

.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}

.accordion .accord .accordBody {
  padding: 0;
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}

.accordion .accord:focus>*~.accordBody {
  height: 125px;
  overflow: auto;
}

.accordion .accord:focus+.accord .accordHeader {
  border-top: solid 1px #cccccc;
}

<div class="accordion">
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>
  <div class="accord" tabindex="0">
    <div class="accordHeader">
      Header
    </div>
    <div class="accordBody">
      Body
    </div>
  </div>

现在从视觉上看，这看起来并不美观，因为 .accordBody 缺少填充。但是，如果我现在尝试添加所述填充，设计就会中断，因为填充将导致 .accordBody，尽管其 height 设置为 0 >，保持开放。

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader,
.accordion .accord .accordBody {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}

<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
</div>

如何确保 height: 0; 也包含填充？

Answer 1

添加额外的容器并考虑边距而不是填充

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordBody {
  background-color: #fff;
}
.accordion .accord .accordBody > div {
  margin:1rem;
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}

<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         <div>Body</div>
      </div>
   </div>
</div>

如果没有额外的包装器，您可以考虑使用伪元素的一些技巧:

.accordion {
  border: solid 1px #cccccc;
  border-radius: 0.25rem;
  box-shadow: 0 2px 4px -1px #b3b3b3;
}
.accordion .accord .accordHeader {
  background-color: #fff;
  padding: 1rem;
}
.accordion .accord .accordBody {
  background-color: #fff;
  padding:0 1rem;
}
.accordion .accord .accordBody:before,
.accordion .accord .accordBody:after{
  content:"";
  display:block;
  height:min(100%,1rem); /* don't make it more than 1rem and it will be 0 on collapse due to 100%x0 */
}
.accordion .accord .accordHeader {
  border-bottom: solid 1px #cccccc;
  color: #000;
  cursor: pointer;
}
.accordion .accord .accordBody {
  box-shadow: inset 0px 2px 4px -1px #e6e6e6;
  height: 0;
  transition: height 250ms ease;
  overflow: hidden;
}
.accordion .accord:focus > * ~ .accordBody {
  height: 125px;
  overflow: auto;
}
.accordion .accord:focus + .accord .accordHeader {
  border-top: solid 1px #cccccc;
}

<div class="accordion">
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
   <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
      <div class="accord" tabindex="0">
      <div class="accordHeader">
         Header
      </div>
      <div class="accordBody">
         Body
      </div>
   </div>
</div>