Tailwind basic container និង spacing

សិក្សាអំពី container និង spacing ។ សម្រាប់ spacing មានដូចជា margin padding និង spacebetween

Container

<div class="container">
        <article class="bg-yellow-200">
            <h1>Tailwind Container</h1>
            <p>
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </article>
    </div>
    <div class="container mx-auto">
        <article class="bg-pink-200">
            <h1>Tailwind Container mx-auto</h1>
            <p>
                ( mx-auto is margin with auto left and auto right )
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
            </p>
        </article>
    </div>

Spacing

Margin

m-1 = 4px
m-1.5 = 6px
m-2 = 8px

=> m-1 x 4 = 4 px

<div class="container mx-auto">
        <div class="bg-emerald-200 m-2">Text m-2 is margin 2</div>
        <div class="bg-teal-300 mb-4">Text mb-4 is margin bottom 4</div>
        <div class="bg-gray-200 mt-4">Text mt-4 is margin top 4</div>
        <div class="bg-blue-200 ml-4">Text ml-4 is margin left 4</div>
        <div class="bg-emerald-200 mr-4">Text mr-4 is margin right 4</div>
        <h1 class="underline decoration-red-600">How to use with px</h1>
        <div class="bg-slate-300 mt-[15px]">Use with px is mt-[15px]</div>
    </div>

padding

  <div class="container mx-auto">
        <div class="bg-emerald-200 p-2">Text p-2 is padding 2</div>
        <div class="bg-teal-300 pb-4">Text pb-4 is padding bottom 4</div>
        <div class="bg-gray-200 pt-4">Text pt-4 is padding top 4</div>
        <div class="bg-blue-200 pl-4">Text pl-4 is padding left 4</div>
        <div class="bg-emerald-200 pr-4">Text pr-4 is padding right 4</div>
    </div>
  

Spacing between

 <!-- Space between X -->
<div class="container mx-auto">
    <h1>Study flex space-x-4</h1>
    <div class="flex space-x-4 bg-emerald-400">
        <div>iterm 1</div>
        <div>iterm 2</div>
        <div>iterm 3</div>
        <div>iterm 4</div>
    </div>
</div>
<br><hr><br>
<!-- Space between Y -->
<div class="container mx-auto">
    <h1>Study flex flex-col space-y-4</h1>
    <div class="flex flex-col space-y-4 bg-gray-400">
        <div>iterm 1</div>
        <div>iterm 2</div>
        <div>iterm 3</div>
        <div>iterm 4</div>
    </div>
</div>