Використання утиліт відступів для margin і padding
Ви чудово справляєтеся!
Правильне використання відступів є ключовим для створення візуально привабливих і добре структурованих макетів. Раніше ми використовували утиліти для margin і padding, але зараз розглянемо їх детальніше.
Margin
Утиліти margin у Tailwind CSS дозволяють керувати відступами навколо елементів. Вони застосовуються за допомогою префікса m-, після якого вказується значення розміру. Можна застосовувати відступи до всіх сторін або до окремих сторін (зверху, справа, знизу, зліва) за допомогою відповідних префіксів (mt-, mr-, mb-, ml-).
Examples
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Відступи всередині (Padding)
Утиліти для відступів всередині (padding) у Tailwind CSS подібні до класів для зовнішніх відступів (margin), і логіка їх використання залишається такою ж.
Вони застосовуються за допомогою префікса p-, після якого вказується значення розміру. Можна застосовувати відступи до всіх сторін або до конкретної сторони (верх, праворуч, низ, ліворуч) за допомогою відповідних префіксів (pt-, pr-, pb-, pl-).
Приклади
| Padding Class | Description |
|---|---|
p-4 | Застосовує внутрішній відступ 1rem (16px) до всіх сторін. |
pt-2 | Застосовує внутрішній відступ 0.5rem (8px) до верхньої сторони. |
pr-6 | Застосовує внутрішній відступ 1.5rem (24px) до правої сторони. |
pb-1 | Застосовує внутрішній відступ 0.25rem (4px) до нижньої сторони. |
pl-3 | Застосовує внутрішній відступ 0.75rem (12px) до лівої сторони. |
index.html
Горизонтальні та вертикальні відступи
Додатково можна застосовувати зовнішні та внутрішні відступи по горизонтальній (_x-) або вертикальній (_y-) осях.
Приклади
| Class | Description |
|---|---|
mx-4 | Застосовує зовнішній відступ 1rem (16px) до лівої та правої сторін. |
my-4 | Застосовує зовнішній відступ 1rem (16px) до верхньої та нижньої сторін. |
px-4 | Застосовує внутрішній відступ 1rem (16px) до лівої та правої сторін. |
py-4 | Застосовує внутрішній відступ 1rem (16px) до верхньої та нижньої сторін. |
index.html
1. Який клас застосовує відступ (margin) 1rem (16px) до всіх сторін елемента?
2. Як застосувати відступ всередині (padding) 0.5rem (8px) до верхньої сторони елемента?
3. Які класи Tailwind CSS використовуються для встановлення зовнішнього відступу (margin) 2rem (32px) для верхньої та нижньої сторін елемента?
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Can you explain the difference between margin and padding in more detail?
How do I choose the right spacing utility for my layout?
Are there responsive margin and padding classes in Tailwind CSS?
Awesome!
Completion rate improved to 3.57Використання утиліт відступів для margin і padding
Свайпніть щоб показати меню
Ви чудово справляєтеся!
Правильне використання відступів є ключовим для створення візуально привабливих і добре структурованих макетів. Раніше ми використовували утиліти для margin і padding, але зараз розглянемо їх детальніше.
Margin
Утиліти margin у Tailwind CSS дозволяють керувати відступами навколо елементів. Вони застосовуються за допомогою префікса m-, після якого вказується значення розміру. Можна застосовувати відступи до всіх сторін або до окремих сторін (зверху, справа, знизу, зліва) за допомогою відповідних префіксів (mt-, mr-, mb-, ml-).
Examples
| Margin Class | Description |
|---|---|
m-4 | Applies a margin of 1rem (16px) to all sides. |
mt-2 | Applies a margin of 0.5rem (8px) to the top side. |
mr-6 | Applies a margin of 1.5rem (24px) to the right side. |
mb-1 | Applies a margin of 0.25rem (4px) to the bottom side. |
ml-3 | Applies a margin of 0.75rem (12px) to the left side. |
index.html
Відступи всередині (Padding)
Утиліти для відступів всередині (padding) у Tailwind CSS подібні до класів для зовнішніх відступів (margin), і логіка їх використання залишається такою ж.
Вони застосовуються за допомогою префікса p-, після якого вказується значення розміру. Можна застосовувати відступи до всіх сторін або до конкретної сторони (верх, праворуч, низ, ліворуч) за допомогою відповідних префіксів (pt-, pr-, pb-, pl-).
Приклади
| Padding Class | Description |
|---|---|
p-4 | Застосовує внутрішній відступ 1rem (16px) до всіх сторін. |
pt-2 | Застосовує внутрішній відступ 0.5rem (8px) до верхньої сторони. |
pr-6 | Застосовує внутрішній відступ 1.5rem (24px) до правої сторони. |
pb-1 | Застосовує внутрішній відступ 0.25rem (4px) до нижньої сторони. |
pl-3 | Застосовує внутрішній відступ 0.75rem (12px) до лівої сторони. |
index.html
Горизонтальні та вертикальні відступи
Додатково можна застосовувати зовнішні та внутрішні відступи по горизонтальній (_x-) або вертикальній (_y-) осях.
Приклади
| Class | Description |
|---|---|
mx-4 | Застосовує зовнішній відступ 1rem (16px) до лівої та правої сторін. |
my-4 | Застосовує зовнішній відступ 1rem (16px) до верхньої та нижньої сторін. |
px-4 | Застосовує внутрішній відступ 1rem (16px) до лівої та правої сторін. |
py-4 | Застосовує внутрішній відступ 1rem (16px) до верхньої та нижньої сторін. |
index.html
1. Який клас застосовує відступ (margin) 1rem (16px) до всіх сторін елемента?
2. Як застосувати відступ всередині (padding) 0.5rem (8px) до верхньої сторони елемента?
3. Які класи Tailwind CSS використовуються для встановлення зовнішнього відступу (margin) 2rem (32px) для верхньої та нижньої сторін елемента?
Дякуємо за ваш відгук!
