如何移除可调整大小的div产生的多余内边距？

你遇到的不是内边距，是浏览器给resize控件或滚动条预留的空间，以下是两种可行方案：

方案1：拆分容器与内容层（推荐） #

把resize和滚动逻辑拆到两个元素上，外层负责调整大小，内层负责内容滚动，彻底隔离两者的空间影响：

<div className='bg-[#26252a] min-w-[285px] min-h-[70vh] resize-x rounded-xl overflow-hidden'>
  <section className='w-full h-full overflow-scroll'>
    {/* 你的内容放这里 */}
  </section>
</div>

原理： #

• 外层容器设置resize-x和overflow-hidden，确保resize手柄不会干扰内部内容，同时圆角样式正常生效
• 内层section负责滚动逻辑，不会被resize控件占用空间，彻底消除多余间距

方案2：隐藏不必要的滚动条 #

如果你的内容多数时候不需要滚动，或者可以接受隐藏滚动条，直接去掉滚动条占用的空间：

1. 给目标元素添加自定义样式隐藏滚动条：

<section 
className='bg-[#26252a] min-w-[285px] p-0 min-h-[70vh] resize-x rounded-xl overflow-scroll'
style={{
  scrollbarWidth: 'none', // Firefox
  msOverflowStyle: 'none' // IE/Edge
}}
>
</section>

2. 在全局CSS文件中添加Chrome/Safari的滚动条隐藏规则：

::-webkit-scrollbar {
  display: none;
}

原理： #

overflow-scroll会强制显示滚动条，即使元素为空，滚动条本身会占据宽度/高度空间，隐藏后就能消除这个多余间距，同时resize功能不受影响。

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