html - 带有填充的代码元素扩展到其容器之外

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/

要查看此内容，请将代码元素上的内边距设置为 30 像素。它向上延伸并超过第一条线。

这似乎是因为代码元素嵌套在段落中，而段落又嵌套在 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;
}

You just add display:inline-block;