Question 348889 in Html Question posted in
Some basic documentation can be found here.

Html – Flexbox child does not have declared padding

I just can figure out why the right button has not enough padding.

Screenshot

<div class="col-span-2 flex gap-0.5 items-center justify-between">
   <p>Wie möchten Sie ihre Antwort erhalten?</p>
   <div class="grid grid-cols-2 gap-1.5">
      <div
         class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white"
         >
         E-Mail
      </div>
      <div
         class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"
         >
         Telefon
      </div>
   </div>
</div>
Tags:

2

Answers


  1. 0

    the padding is OK, but the value of the width (47.8) is fixed and the same for the 2 on your 2 buttons
    you may do this:

    <div
  class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none"
  style="width: fit-content;"
  >
  Telefon
</div>
    Login or Signup to reply.
  2. 0

    You could consider applying flex-basis: 0; flex-grow: 1 to the <p> element. This means that the grid container for the buttons will be "prioritized" in its width. This allows its buttons to be their natural width. Any remaining parent horizontal space is then filled by the <p> element:

    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<div class="w-full flex gap-0.5 items-center justify-between p-10">
  <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p>
  <div class="grid grid-cols-2 gap-1.5">
    <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white">
      E-Mail
    </div>
    <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none">
      Telefon
    </div>
  </div>
</div>

<div class="max-w-md w-full flex gap-0.5 items-center justify-between p-10">
  <p class="basis-0 grow">Wie möchten Sie ihre Antwort erhalten?</p>
  <div class="grid grid-cols-2 gap-1.5">
    <div class="whitespace-nowrap rounded bg-black px-4 py-3 text-center leading-none text-white">
      E-Mail
    </div>
    <div class="whitespace-nowrap rounded border px-4 py-3 text-center leading-none">
      Telefon
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search