Next.js组件右侧出现多余内边距，如何修复？

我正在用Next.js制作个人作品集，具备HTML、CSS基础，还有Express.js后端开发经验。现在遇到一个问题：Work组件内的WorkCard出现了非预期的右侧内边距，代码逻辑看起来很简单，没发现样式冲突，但就是找不到问题根源。

具体表现：

• 给内层div设置w-full p-0时，内容能贴合边框；
• 设置p-1这类带padding的值时，右侧会出现过多空白；
• 即使专门设置pr-0，右侧仍有多余内边距。

相关代码：

export const Work = () => {
    const listTest: WorkData[] = [
        {
            id: 1,
            company_name: 'Entreprise',
            profession: 'Front-end developper',
            content: "Developing a mobile application for a startup\n - Front of multiple screens/components, integration of premium, integration of pictures galery, improving back-office",
            mission_nb: 9,
            hour_nb: 319,
            picture: '/assets/images/test.png',
            link: 'https://www.wikipedia.org/',
            technologies: ['flutter', 'javascript', 'postgresql', 'docker'],
            period: {
                start: new Date('2023-07-19'),
                end: null,
            },
        },
    ];

    return (
        <Section className="relative top-[50px]">
            <div className="grid grid-cols-1 gap-4">
                {listTest.map((work) => (
                    <WorkCard key={work.id} {...work} />
                ))}
            </div>
        </Section>
    );
};

const WorkCard: React.FC<WorkData> = ({ company_name, profession, content, mission_nb, hour_nb, picture, link, technologies }) => {
    return (
        <div className="bg-card border border-card rounded-xl shadow p-0 box-border">
            <div className="w-full pt-9 pb-5 pl-4 pr-0">
                <p className="text-md font-semibold whitespace-pre-line">
                    {content}</p>
                <p> missions: <span className="text-accent">{mission_nb}</span><br />
                    hours carried out: <span className="text-accent">{hour_nb}</span></p>
            </div>
        </div>
    );
}

修复方案 #

试试以下几个步骤，大概率能解决问题：

1. 强制内外层div使用border-box盒模型
   虽然Tailwind默认全局设置了box-sizing: border-box，但自定义组件或局部样式可能会覆盖这个规则。给WorkCard的内外层div都加上box-border类，确保padding不会超出元素宽度：

<div className="bg-card border border-card rounded-xl shadow box-border">
    <div className="pt-9 pb-5 pl-4 pr-0 box-border">
        {/* 内容 */}
    </div>
</div>

2. 移除内层div的w-full类
   block元素默认会自动填充父元素宽度，手动设置w-full（即width: 100%）在结合padding时，可能会触发浏览器的宽度计算偏差。直接去掉w-full即可：

<div className="pt-9 pb-5 pl-4 pr-0 box-border">

3. 给文本添加自动换行规则
   whitespace-pre-line会保留换行，但长文本可能因为没有自动换行导致溢出，进而视觉上产生右侧空白。给p标签加上break-words类，确保文本超出宽度时自动换行：

<p className="text-md font-semibold whitespace-pre-line break-words">
    {content}
</p>

4. 排查Section组件的默认样式
   如果上述方法都无效，暂时把<Section>替换成普通<div>测试，确认是否是Section组件自带的padding、margin或宽度限制导致的问题。

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