CSS布局问题：footer设边框后仅首个p标签被包含，第二个p溢出

问题根源 #

你给footer设置了固定的height: 50px，但两个p标签的总高度（包括浏览器默认的margin、行高）超过了50px，导致第二个p被挤出了footer的红色边框。

几种可行的解决办法 #

• 直接移除固定高度：删掉footer的height: 50px，让footer根据内部内容自动撑开高度，这是最简单的处理方式：

  footer {
    border: 2px solid red;
    text-align: center;
    /* 删掉height: 50px */
  }
  

• 用最小高度替代固定高度：如果想让footer至少保持50px高度，同时能自适应内容高度，把height改成min-height：

  footer {
    border: 2px solid red;
    text-align: center;
    min-height: 50px;
  }
  

• 调整内部元素间距强行适配：通过缩小p标签的默认外边距，让内容能放进50px高度的footer里，同时用flex布局让内容居中：

  footer {
    border: 2px solid red;
    text-align: center;
    height: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 10px;
  }
  footer p {
    margin: 3px 0; /* 缩小上下外边距 */
    line-height: 1.2; /* 可选：缩小行高 */
  }
  

内容的提问来源于stack exchange，提问作者Ahmed Saif