html 为什么我不能给这个section标签内的元素添加任何边距或填充？(使用Tailwind)

n6lpvg4x 于 2023-01-07 发布在其他

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

下面是我目前的代码：'

<section id="introduction" class="bg-gradient-to-bl from-cyan-500 via-teal-400 to-blue-500 h-[700px]">
           <div class="w-[450px] flex flex-col">
                <h1 class="text-6xl font-semibold text-white leading-[75px] drop-shadow-2xl">Lorem ipsum dolor sit amet consectetur.</h1>
                <p class="text-lg text-white font-medium drop-shadow-lg">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, doloremque molestias itaque corporis exercitationem recusandae.</p>
                <div class="flex flex-row">
                    <a href="#" class="bg-transparent px-8 py-2 rounded-lg  text-white text-center border drop-shadow-md">Sign Up</a>
                    <a href="" class="bg-emerald-500 px-8 py-2 rounded-lg  text-white text-center drop-shadow-md">Sign Up</a>
                </div>
            </div> 
        </section>

'
我无法为section中的元素添加任何间距。除了section中div中的按钮之外。我在哪里搞砸了？
我试过将h1和p标签添加到它们自己的div中，更改哪个标签是flex容器，哪个不是，div的大小等等。

Html

来源：https://stackoverflow.com/questions/74996378/why-am-i-unable-to-add-any-margins-or-padding-to-the-elements-inside-this-sectio

1条答案

按热度按时间

dgtucam11#

一切都很好。

<section id="introduction" class="h-[700px] bg-gradient-to-bl from-cyan-500 via-teal-400 to-blue-500">
  <div class="flex w-[450px] flex-col">
    <h1 class="text-6xl font-semibold leading-[75px] text-white drop-shadow-2xl p-8">Lorem ipsum dolor sit amet consectetur.</h1>
    <p class="text-lg font-medium text-white drop-shadow-lg m-10">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, doloremque molestias itaque corporis exercitationem recusandae.</p>
    <div class="flex flex-row m-10">
      <a href="#" class="rounded-lg border bg-transparent px-8 py-2 text-center text-white drop-shadow-md mx-10">Sign Up</a>
      <a href="" class="rounded-lg bg-emerald-500 px-8 py-2 text-center text-white drop-shadow-md">Sign Up</a>
    </div>
  </div>
</section>

输出：