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

Html – Margins with constant size in Tailwind CSS

I have the following HTML element, which appears as shown.

<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>

I would like to have a margin between the blue background and the border like this:

,

where the margin is the same size (say, 16px) all the way around. How can I achieve this by modifying the above code?

I know I can use h-[90%] w-[90%] to get a similar effect, however I want the margin size to be constant instead of depending on the height and the width. I have tried to use the tailwind margin properties, but I cannot figure it out.

Thanks for the help.

Tags:

2

Answers


  1. 0

    To achieve a constant margin between the blue background and the border in your HTML code, you can modify the existing classes and add an additional wrapper <div element..

    Here’s an updated version of your code:

    

    

    <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>
    

    

    

    

    Please note that the className attribute is typically used in ‘React components’. If you are using plain HTML, you should use the class attribute instead:
    

    

    

    

    <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>
    

    

    

    

      

    • Remember to ensure that you have the Tailwind CSS framework properly set up and included in your project for the classes to work as expected!
      • 

    

    Hope I could help,
    

    Regards,
    

    Jonasz
    Login or Signup to reply.
  2. 0

    Adding padding to the inside div should do the trick:

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

    p-4 will add 16px of padding on each side.

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

Back To Top
Search