按钮尺寸不能硬设width/height，因HTML不支持button的height属性，CSS固定值易被WooCommerce高优先级样式覆盖，且忽略padding、font-size、line-height对实际高度的影响，导致文字裁切、移动端错位或图标对齐异常。
购物车按钮的尺寸不能只靠width和height硬写死，否则在不同设备或主题下极易变形、错位，甚至被WooCommerce默认样式覆盖。关键得看它在哪用、要不要响应式、是否要适配图标或文字长度。
直接设width和height会出什么问题？
在<button>标签里写width="120" height="40"是无效的——HTML原生不支持height属性用于button；而CSS中同时设width: 120px; height: 40px;又容易被主题CSS层叠覆盖，尤其WooCommerce常通过.button、.add_to_cart_button等类注入高优先级规则。
- 浏览器渲染时，按钮内边距（
padding）、字体大小（font-size）、行高（line-height）都会影响最终高度，硬设height反而导致文字被裁切或上下留白失控 - 移动端小屏下，固定像素宽高会让按钮撑破容器，或文字换行错乱
- 如果按钮含图标（比如Font Awesome
<i class="fa-cart-plus"></i>），图标尺寸与文字基线不一致，height无法统一对齐
推荐用padding + font-size控高宽
这是最稳定、兼容性最好、也最符合WooCommerce实际渲染逻辑的方式。按钮视觉高度主要由内边距撑开，宽度则随文字/图标自然延展或用min-width约束。
- 设
padding: 10px 20px;→ 垂直方向10px × 2 = 20px，水平方向20px × 2 = 40px，再加文字本身高度≈40–48px，整体按钮高度就落在合理触控区间 - 配合
font-size: 14px;（或1rem），确保文字可读且不溢出 - 加
min-width: 100px;防短文字（如“加入”）按钮过窄；加max-width: 200px;防长文字（如“立即加入购物车并结算”）撑爆布局 - 避免用
line-height强行拉高——它会影响垂直居中逻辑，尤其在有图标时易错位
要做正方形购物车图标按钮？用aspect-ratio: 1
当按钮只放一个购物车图标（如<i class="fa-shopping-cart"></i>），需要严格宽高相等时，aspect-ratio: 1是最干净的解法，但要注意浏览器支持边界。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: inline-flex或inline-block，再给width: 44px;（或其他单一尺寸），aspect-ratio: 1才会生效 - Chrome 88+、Firefox 89+、Safari 15.4+ 支持；旧版Safari需降级为
padding-bottom: 100%+height: 0+position: relative组合 - 别同时写
width和height——一旦两者都存在，aspect-ratio会被忽略 - 图标需用
margin: auto或display: flex居中，否则padding-bottom会把内容往下推
WooCommerce主题里按钮尺寸总被覆盖？优先级这么调
很多主题（如Storefront、Astra）会给.add_to_cart_button设!important，或嵌套在.woocommerce ul.products li .button这种高权重选择器里。光写.add_to_cart_button { padding: 12px 24px; }大概率无效。
- 用更具体的选择器，例如
.woocommerce-page .add_to_cart_button或body.woocommerce .button.add_to_cart_button - 加
!important仅在必要时用，例如padding: 12px 24px !important;，但要意识到它会阻碍后续调试 - 检查是否启用了“按钮尺寸继承自主题设置”——有些主题后台有「Button Size」开关，关掉才能让CSS生效
- 若用子主题，确保CSS加载顺序在父主题之后；若用Customizer → Additional CSS，注意它默认插入在所有主题CSS之后，通常够用
真正难的不是设尺寸，而是判断这个按钮是否该有固定宽高——购物车按钮多数时候要适配文字长度、图标存在与否、多语言（“Add to Cart” vs “加入购物车” vs “カートに入れる”），所以用padding和min-width比死守像素值更可持续。一旦你发现按钮在某个页面突然变矮或文字挤在一起，八成是某处CSS重置了line-height或vertical-align，而不是宽高没设对。
