如何让分页锚点元素的边框完全包含在父容器内？

问题描述 #

制作分页组件时，希望<div.pagination>内的<a>元素边框填满父容器的可用空间，但实际边框超出了父容器范围，未达到预期填充效果。

问题原因 #

1. 父容器.bottom设置了固定height:2rem，而.pagination>a的padding:14px 20px加上边框的高度总和超过了2rem，导致元素溢出容器。
2. .pagination未设置合适的布局规则，<a>作为行内元素，垂直方向的padding和border会突破容器的高度限制。

解决方案 #

通过调整布局规则和元素尺寸，让<a>元素完全适配父容器空间：

1. 移除.bottom的固定高度，改用flex垂直对齐属性让容器自适应内容。
2. 给.pagination添加flex布局，控制内部<a>元素的排列方式。
3. 调整<a>元素的padding和display属性，使其填充父容器且内容居中。

修改后的完整CSS代码 #

*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  width: 1200px;
  background: #e2f2fc;
  color: #333;
  margin: auto;
  padding: 1em 0;

  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}

table {
  border-collapse: collapse;
  width: 100%;
  background: white;
}

table,
th,
td {
  border: 1px solid;
  padding: .25em;
  text-align: left;
}

th {
  background: #eee;
}

.box {
  background: white;
  padding: .75em;
  font-size: 1rem;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: yellow;
}

.pagination {
  display: flex;
}

.pagination>a {
  padding: 0.5em 1em;
  border: 1px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #333;
}

.pagination>.active {
  background-color: #ccc;
}

关键修改说明 #

• .bottom容器：移除固定height，添加align-items:center让内容垂直居中，容器高度自动适配子元素，避免溢出。
• .pagination容器：添加display:flex，让内部<a>元素横向排列，统一布局规则。
• <a>元素：设置display:flex并添加align-items:center、justify-content:center，保证文字在按钮内居中；调整padding为相对单位，确保边框完全包含在父容器内；可选添加active状态的背景色，增强交互视觉反馈。

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