Question 136859 in CSS Question posted in
Some basic documentation can be found here.

Tailwind CSS – Position border set distance below container

I wish to position this border 42px below the text without affecting the <p> tag:

    return (
        <div className='hover:border-b-[4px]'>
            <p>Collections</p>
        </div>
    )

How can I accomplish this witout affecting (moving) the contents of the <p> tag using Tailwind?

Tags:

2

Answers


  1. 0

    Apply padding-bottom: 42px to the <div> element to push the bottom border edge 42px away from the bottom of the <p> element.

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

<div class='pb-[42px] hover:border-b-[4px]'>
  <p>Collections</p>
</div>
    Login or Signup to reply.
  2. 0

    I don’t know why exactly 42px but this will work in tailwind-css:

    <div>
  <p>Collections</p>
  <div class="mt-[42px] h-4 w-4 bg-blue-500 hover:border-b-[4px]"></div>
</div>

    All you have to do is make bot <div> and <p> in a <div>, also note that I have added h-4, w-4 and a background color to see the changes. in you case I guess you’re using a framework like React or Vue, in this case probably change class into className.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search