为何class为card的div边框未包裹内部p标签？

先看你用到的代码：

CSS代码 #

.card {
  width: 200px;
  height: 200px;
  border: 2px solid black;
  border-radius : 5px;
  display: inline-block;
  margin: 10px;
}

img {
  width : 100%;
}

HTML代码 #

<div class="card">
  <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&w=640&h=375&dpr=2" alt="male">
  <div class="desc">
    <h3>Vineet Kumar Tamboli</h3>
    <p>Front-end Developer</p>
  </div>
</div>
<div class="card">
  <img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compress&cs=tinysrgb&w=640&h=375&dpr=2" alt="female">
  <div class="desc">
    <h3>Arpita Mahobia</h3>
    <p>Data Scientist</p>
  </div>
</div>

出现这个问题的核心原因是你给.card设置了固定高度height: 200px，而容器内的内容总高度超过了这个值：

• 图片宽度设为100%（200px），按原图640×375的比例，高度会自动缩放到约117px；
• 加上<h3>默认的上下外边距，再加上<p>的内容和它自带的外边距，整个.card内部内容的总高度已经超过了200px；
• 默认情况下，当块级容器设置了固定高度，内容超出时会直接溢出容器范围，所以<p>标签就跑到了.card的边框外面。

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