Tailwind - Margin & Padding

Margin & Padding

tailwind 에서 margin 과 padding 은 상(top), 하(bottom), 좌(left), 우(right) 네 방향으로 지정할 수 있습니다. 또한 x축(좌, 우), y축(상, 하)을 묶어서 지정하거나 네 방향 전부를 지정할 수 있습니다.

•

방향 : top, bottom, left, right

•

크기 : 기본값 1의 값이 0.25rem (4px)로 설정

값	rem	픽셀(px)
0	0rem	0px
0.5	0.125rem	2px
1	0.25rem	4px
1.5	0.375rem	6px
2	0.5rem	8px
2.5	0.625rem	10px
3	0.75rem	12px
3.5	0.875rem	14px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
7	1.75rem	28px
8	2rem	32px
9	2.25rem	36px
10	2.5rem	40px
11	2.75rem	44px
12	3rem	48px
14	3.5rem	56px
16	4rem	64px
20	5rem	80px
24	6rem	96px
28	7rem	112px
32	8rem	128px
36	9rem	144px
40	10rem	160px
44	11rem	176px
48	12rem	192px
52	13rem	208px
56	14rem	224px
60	15rem	240px
64	16rem	256px
72	18rem	288px
80	20rem	320px
96	24rem	384px

Margin

외부 여백

import React from 'react';
import MainLayout from '../../layouts/MainLayout';

const SkeletonCard = () => {
  return (
    <div className="m-10 inline-block w-[280px]">  {/* ⭐ mx my mt mb ml mr m */}
      <div className="bg-gray-200 p-4 rounded-lg shadow-md space-y-4 animate-pulse">
        <div className="h-40 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
        <div className="space-y-2">
          <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
          <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
          <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
        </div>
      </div>
    </div>
  );
};

const Margin = () => {
  return (
    <MainLayout>
      <div className="p-10">
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
      </div>
    </MainLayout>
  );
};

export default Margin;
JavaScript
복사

Padding

내부 여백

import React from 'react';
import MainLayout from '../../layouts/MainLayout';

const SkeletonCard = () => {
  return (
    <div className="inline-block w-[280px]"> 
      <div className="bg-gray-200 p-4 rounded-lg shadow-md space-y-4 animate-pulse">
        <div className="p-10">  {/* ⭐ px py pt pb pl pr p */}
          <div className="h-40 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
          <div className="space-y-2">
            <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
            <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
            <div className="h-4 bg-gradient-to-r from-gray-300 via-gray-200 to-gray-300 rounded"></div>
          </div>
        </div>
      </div>
    </div>
  );
};

const Padding = () => {
  return (
    <MainLayout>
      <div className="p-10">
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
        <SkeletonCard />
      </div>
    </MainLayout>
  );
};

export default Padding;
JavaScript
복사