TReact项目中添加padding时如何保持图片原有尺寸？

问题根源 #

1. 负padding无效：CSS里padding不能设负值，你写的padding: -20px是非法声明，浏览器会直接忽略，无法实现预期效果。
2. 盒模型默认行为：默认box-sizing: content-box规则下，padding会被计算在元素设定的宽高之外，添加padding后图片总尺寸会超出设定值，受容器限制后就会被压缩或隐藏。

解决方案 #

方案1：修改盒模型（最推荐） #

给.service__img添加box-sizing: border-box属性，这样padding和border都会被包含在你设置的width和height范围内，不会额外扩大元素总尺寸：

.service__img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid gray;
  padding: 0.5rem; /* 替换成你需要的正padding值 */
  flex-shrink: 0;
  box-sizing: border-box; /* 关键属性 */
}

方案2：将padding转移到父容器 #

如果不想改动图片的样式，可以把padding加到图片的父容器.span-img__container上，同时调整容器的对齐方式保证图片居中：

.span-img__container {
  display: flex;
  justify-content: center;
  align-items: center; /* 让图片垂直居中 */
  width: 100%;
  max-width: 45px;
  padding: 0.5rem; /* 在这里设置padding */
  box-sizing: border-box;
}

.service__img {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 1px solid gray;
  flex-shrink: 0;
  /* 移除图片自身的padding */
}

注意事项 #

• 不要使用负padding，CSS规范不支持该属性，所有浏览器都会忽略负值的padding声明。
• 如果SVG图片存在默认行内元素间隙，可给.service__img添加display: block消除间隙。

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