为何容器内文本无法对齐至左下角？CSS新手卡片布局问题

为什么容器会被撑大？ #

你遇到的容器变大问题，根源是CSS默认的**content-box盒模型**：当你设置width和height时，这两个值只代表元素内容区域的尺寸，padding和border会额外加到这个尺寸外面。比如你设置width:500px+padding-right:100px，容器实际宽度就变成了500+100=600px，高度同理变成300+100=400px。

另外，你用padding-top和padding-right的思路完全错了——这两个属性是给容器顶部、右侧加内边距，会把内容往右下方向挤，根本不可能让文本跑到左下角。

正确的实现方案 #

方案1：用Flexbox布局（推荐，现代布局方式）

通过Flexbox的对齐属性，直接控制内容在容器内的位置，同时用box-sizing: border-box让padding不会撑大容器：

.card {
  box-sizing: border-box; /* 让padding包含在width/height内 */
  height: 300px;
  width: 500px;
  background: silver;
  margin: 50px auto 0; /* 简写上下左右margin */
  padding: 20px; /* 可选，添加内边距，不会改变容器尺寸 */
  display: flex;
  flex-direction: column; /* 让h3和p垂直排列 */
  justify-content: flex-end; /* 把内容推到容器底部 */
  align-items: flex-start; /* 让内容靠左对齐 */
}

HTML不需要改动，直接用你原来的结构即可。

方案2：用绝对定位

如果习惯用定位方式，可以给父容器设置相对定位，内部文本设置绝对定位来固定位置：

.card {
  box-sizing: border-box;
  height: 300px;
  width: 500px;
  background: silver;
  margin: 50px auto 0;
  position: relative; /* 作为绝对定位的参考容器 */
  padding: 20px;
}
.card .text-group {
  position: absolute;
  bottom: 20px; /* 距离容器底部20px */
  left: 20px; /* 距离容器左侧20px */
}

对应的HTML调整为：

<div class="card">
  <div class="text-group">
    <h3>Swiss Bank.</h3>
    <p>Digital Card.</p>
  </div>
</div>

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