能否通过多个data属性值为元素设置padding（内边距）？

当然可以实现！你完全可以通过多个自定义data-*属性来精准控制元素不同方向的内边距（padding），不管是只设置上下、左右，还是单独控制某一边都没问题。下面我给你具体的实现方案和代码示例：

方案1：按方向组统一设置（上下/左右） #

这种方式适合你需要给上下或左右设置相同内边距的场景，比如用data-padding-y控制上下内边距，data-padding-x控制左右内边距。

HTML 示例 #

<div class="box" data-padding-y="1.5rem" data-padding-x="2rem">
  我是一个有上下1.5rem、左右2rem内边距的盒子
</div>
<div class="box" data-padding-y="20px">
  我只有上下20px内边距，左右没有额外内边距
</div>

CSS 实现 #

.box {
  border: 1px solid #ccc;
  background-color: #f5f5f5;
  margin: 10px 0;
}

/* 匹配带有data-padding-y属性的元素，设置上下内边距 */
[data-padding-y] {
  padding-top: attr(data-padding-y);
  padding-bottom: attr(data-padding-y);
}

/* 匹配带有data-padding-x属性的元素，设置左右内边距 */
[data-padding-x] {
  padding-left: attr(data-padding-x);
  padding-right: attr(data-padding-x);
}

方案2：单独控制每一个方向的内边距 #

如果需要更精细的控制（比如只设置顶部或右侧内边距），可以用更具体的data-*属性，比如data-padding-top、data-padding-right等，针对性设置单方向内边距。

HTML 示例 #

<div class="box" data-padding-top="30px" data-padding-right="15px">
  我只有顶部30px、右侧15px的内边距
</div>

CSS 实现 #

/* 单独控制每一个方向的内边距 */
[data-padding-top] { padding-top: attr(data-padding-top); }
[data-padding-right] { padding-right: attr(data-padding-right); }
[data-padding-bottom] { padding-bottom: attr(data-padding-bottom); }
[data-padding-left] { padding-left: attr(data-padding-left); }

额外提示 #

• 你可以混合使用两种方案，比如同时设置data-padding-y和data-padding-right，实现灵活的内边距组合；
• attr()函数能直接读取data-*属性的数值和单位，支持所有CSS长度单位（px、rem、em、%等）；
• 如果需要动态修改内边距，也可以通过JavaScript修改元素的data-*属性值，CSS会自动生效。

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