Question

当我将代码元素上的填充设置得足够大时，会导致填充超出其父容器的边界：

HTML：

<div class="parent">
  <div class="top">
    Top Line
  </div>
  <div>
    <p>
      <code>
        Bottom Line
      </code>
    </p>
  </div>
</div>

的CSS：

.parent {
  display: flex;
  flex-direction: column;
}

.top {
  margin-bottom: 5px;
}

code {
  background-color: #c0c0c0;
  padding: 10px;
}

p {
    margin-bottom: 5px;
    margin-top: 0px;
}

https://jsfiddle.net/Deepview/ag6977mL/6/

要查看此内容，请将代码元素上的填充设置为30px。它向上延伸到第一行的顶部。

这似乎是因为代码元素嵌套在嵌套在div中的段落中。如果我删除div和段落，问题得到纠正，代码元素不会扩展到顶行。我真的需要保留div和段落。如何避免这种情况发生，并且如果填充很大，代码元素的内部文本是否总是向下移动？

Answer 1

.parent {
  display: flex;
  flex-direction: column;
}

.top {
  margin-bottom: 5px;
}

code {
  background-color: #c0c0c0;
  padding: 30px;
  display: inline-block;
}

p {
    margin-bottom: 5px;
    margin-top: 0px;
}

您只需添加display：inline-block;

Answer 2

您可以使用此css属性来避免溢出

display:inline-block

带有填充的代码元素在其容器外部延伸

2 个答案: