TailwindCSS父元素padding不生效：如何为带bg样式的div设置内边距

首先检查你的Tailwind类是否正确：

• 子元素的p-25不是Tailwind默认的内边距类，默认仅支持p-1至p-96的阶梯值，若需要25px的内边距，应该写成p-[25px]。

你的父div设置内边距的方式本身是对的，但之所以看起来内边距效果像是应用在子元素上，是因为子div作为块级元素，会自动填充父元素的可用宽度（父元素宽度减去自身padding）。如果要直观看到父元素的padding效果，可以给子元素添加不同的背景色或边框，就能区分开父元素的背景区域和子元素的范围了。

举个修正后的示例代码：

<div className="bg-[#fcd34d] aspect-video w-full md:w-8/12 p-4 rounded">
  <div className="p-[25px] bg-white">MAP</div>
</div>

这样你就能明显看到黄色父div的内边距（黄色区域和白色子div之间的空隙），而白色子div的内边距是它自身的p-[25px]。

如果之前加外层div没解决问题，大概率是外层div的样式设置有误——外层div只需要单纯包裹父元素即可，不需要额外加padding或影响布局的样式，比如：

<div className="w-full md:w-8/12">
  <div className="bg-[#fcd34d] aspect-video p-4 rounded">
    <div className="p-[25px]">MAP</div>
  </div>
</div>

把宽度类移到外层div，父div专注于背景、宽高比和内边距，这样结构更清晰，也不会出现样式混淆的问题。

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