Padding and Margins
Explore how to use Tailwind CSS classes to control padding and margins on web elements. Understand the directional sizing pattern, negative margins, and auto margins to manipulate spacing effectively within the box model.
We'll cover the following...
We'll cover the following...
Padding and margins are not next to each other. They are always separated by the border. But Tailwind handles them similarly enough that it is convenient to learn about them together.
Tailwind provides around 245 different classes to manage padding. They usually follow this pattern: .p{direction}-{size}.
Padding
All the padding classes start with p, followed by an optional character for the direction. The six available directions are listed below:
tfor topbfor bottomlfor leftrfor rightxfor horizontal