在Tailwind CSS中使用恒定大小的边距

6za6bjd0 于 2023-07-01 发布在其他

关注(0)|答案(1)|浏览(146)

我有以下HTML元素

<div className="flex col-span-2 row-span-2 h-screen border-blue-500 border-4 justify-center items-center">
    <div className='flex bg-blue-300 h-full w-full justify-center items-center '>
        <div className='text-4xl'>some text</div>
    </div>
</div>

该元素如下所示：

我想在蓝色背景和边框之间有一个边距，如下所示：

，
其中边距的大小始终相同（例如，16px）。如何通过修改上面的代码来实现这一点？
我知道我可以使用h-[90%] w-[90%]来获得类似的效果，但是我希望边距大小是恒定的，而不是取决于高度和宽度。我试过使用顺风保证金属性，但我不能弄清楚。
谢谢你的帮助

css

来源：https://stackoverflow.com/questions/76560561/margins-with-constant-size-in-tailwind-css

1条答案

按热度按时间

jchrr9hc1#

要在HTML代码中实现蓝色背景和边框之间的恒定边距，可以修改现有类并添加**额外的wrapper <div元素。

以下是您的代码的更新版本：*

<div className="flex col-span-2 row-span-2 h-screen border-blue-500 border-4 justify-center items-center">
    <div className="flex bg-blue-300 h-full w-full justify-center items-center m-16">
        <div className="text-4xl">some text</div>
    </div>
</div>

请注意，className 属性通常用于“React components”。如果使用纯HTML，则应使用class属性：

<div class="flex col-span-2 row-span-2 h-screen border-blue-500 border-4 justify-center items-center">
    <div class="flex bg-blue-300 h-full w-full justify-center items-center m-16">
        <div class="text-4xl">some text</div>
    </div>
</div>

*记住确保正确设置Tailwind CSS框架并将其包含在项目中，以便类按预期工作！

希望我能帮上忙
致上，
约纳斯

赞(0）回复(0）举报 2023-07-01

我来回答

在Tailwind CSS中使用恒定大小的边距

1条答案

相关问题

热门标签

最新问答