如何用div在两个React组件间创建垂直间距？Margin与Padding选哪个？

一、当前代码的问题 #

你现在用空<div style={{ padding: '0 10px' }}/>的方式无法实现垂直间距：一是这个空div设置的是左右padding，对垂直方向无影响；二是多余的空div会增加无用DOM节点，不利于性能和维护；另外如果你的.row是默认横向flex布局，这个空div还会挤占水平空间，反而打乱布局。

二、正确实现方法 #

方法1：用Flex/Grid的gap属性（推荐） #

这是现代布局最简洁的方案，专门用于设置容器内子元素的间距，无需给单个组件加样式：

import React from 'react';
import LeftColumn from './LeftColumn'; 
import RightColumn from './RightColumn'; 

function App() {
    return (
        <div className="container">
            {/* 设置row为垂直flex布局，并添加垂直间距 */}
            <div className="row" style={{ 
                display: 'flex', 
                flexDirection: 'column', // 让子元素垂直排列
                gap: '10px' // 子元素间的垂直间距
            }}>
                <LeftColumn style={{ padding: '0 10px' }} />
                <RightColumn style={{ padding: '0 10px' }} />
            </div>
        </div>
    );
}

export default App;

如果你的.row用的是Grid布局，只需要把flexDirection: 'column'换成grid-template-rows: auto auto，gap同样生效。

方法2：用margin设置组件间距 #

如果需要兼容较老浏览器，给其中一个组件添加垂直margin即可：

// 方案A：给左侧组件加底部margin
<LeftColumn style={{ padding: '0 10px', marginBottom: '10px' }} />
<RightColumn style={{ padding: '0 10px' }} />

// 方案B：给右侧组件加顶部margin
<LeftColumn style={{ padding: '0 10px' }} />
<RightColumn style={{ padding: '0 10px', marginTop: '10px' }} />

三、margin vs padding：哪个更适合？ #

• 优先选margin：margin是控制元素与外部其他元素的间距，完全符合“两个独立组件之间的间隔”需求，不会影响组件自身的内部布局和尺寸。
• 不推荐用padding：padding是控制元素内部内容与边框的间距，属于元素内部空间。如果强行用padding实现组件间距，要么会让容器高度冗余（给.row加上下padding），要么会改变组件自身的布局（给组件加上下padding），完全不符合“组件间间隔”的场景。

四、避坑提醒 #

不要用空div来做间距：多余的DOM节点会增加渲染开销，且后续修改布局时容易出现样式冲突，维护成本更高。

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