How to use tailwind css padding, margin and border in your project.
By Emmanuel Chinonso
As important as CSS margin, padding, and border are, most developers often struggle to understand these concepts.
New developers usually use these properties without realizing or acknowledging their importance when rendering items on our page. Although the Tailwind width does not include the margin, padding, or borders.
In today’s Tailwind CSS tutorial, we will explain what these properties are, when to use them, and how to use them when we build a project.
Table of content
- Box model
- Tailwind CSS padding
- Tailwind CSS margin
- Tailwind CSS border
- Project using these properties
We cannot explain these properties without explaining the box model.
It may not be obvious, especially to new developers, but every HTML element is rendered as a web page box.
You may create an image that is round and text beside it. When you inspect it, you will see that HTML renders it as a box.
Therefore, a box model is a box that wraps every block-level HTML element on a webpage. This box model is composed of the content, padding, margin, and borders.
The content has to do with the value of the specified HTML element. This could be an
a tag, or even an
What is the Padding?
Padding is a property used to create space inside a defined border of an element. It is used to create space around or between the element you created.
Tailwind Padding: What is Tailwind CSS padding?
The next area after the content is the padding area. The padding area is the space between its content area and its border. The padding uses whole numbers and even percentages to calculate the width of the element you want to style.set padding on an element.
In Tailwind CSS, the padding size is usually set using the shorthand
padding and a class of
p. Other classes include
The Tailwind padding controls the top, bottom, right, and left space between the content and the border.
However, the tailwind CSS framework offers more default classes for your web development.
You can find all the default padding in Tailwind CSS documentation.
The next thing we will be wondering is when we can use the padding property. You can use it in the following ways.
- When you don’t want your content to touch the edges of the container
- When you want to increase a content block’s size without making the content itself bigger
- When you need space between an inner element and the parent box
- When you want the background of the element to display in the produced gap
The next thing you might be asking yourself is what if the Tailwind padding is not working? Well, you can easily check whether your tailwind padding is working on your web browser developer tool.
Tailwind padding Percentage
Determining the padding percentage you wish to add to your element can be a bit tricky. I will be helping you out.
if for example your #demo is 650px wide, 10% padding will be equal to 0.1 × 650 pixels = 65 pixels.
You can easily use this by adding a square bracket that contains the CSS value (e.g. [10%]) to the prefix such as
p- for padding.
How do you give padding in Tailwind?
Adding Tailwind padding to your Project is not as hard as you may think. All you have to do is to add the classes to the element that you wish to control its space and you are done. You can see an example below.
Tailwind padding between
As you are aware padding is a utility in Tailwind used to control space around an element. Tailwind padding is used to control the space between child elements.
Tailwind padding on a single side
This utility helps to control the padding on one side of the element. we can see an example of these in the image below.
Tailwind padding project
We are going to build a text element. It will be represented in block form, and we can see the effect of Tailwind padding on these blocks. You can also check out this blog to learn how to set up your tailwind the easy way
<body class="flex flex-row"><div class=" bg-gray-300 pr-8 m-3 rounded-lg"><span class="bg-green-200">Target</span></div><div class=" bg-gray-300 pt-8 m-3 rounded-lg"><span class="bg-green-200">Target</span></div><div class=" bg-gray-300 pb-8 m-3 rounded-lg"><span class="bg-green-200">Target</span></div><div class=" bg-gray-300 pl-8 m-3 rounded-lg"><span class="bg-green-200">Target</span></div></body>
Tailwind CSS margin
The Tailwind CSS margin area is shown by a margin edge that is invisible around the border area. The margin separates elements from other elements.
Manipulating these areas gives the different elements the space their need to appear well on the webpage. If you don’t apply Tailwind margins to your elements there will appear joined together.
In Tailwind CSS, the margin property is usually denoted with the shorthand
margin and class
ml. Other classes include
You can check other classes and their properties in the Tailwind CSS documentation. The Tailwind margin property can be used in the following ways
- When you need space around elements, such as separating a photo and words describing it
- When you want to center an element horizontally
- When you want to overlap elements
- When you want to move an element up, down, or side to side.
How do you give margin in Tailwind?
The tailwind margin class controls the margin of any element. This simply controls the positioning of an element. It's easy to add the Tailwind margin to your project. It's as simple as adding the shorthand
m and the value of our Tailwind margin
How do you add a margin in Tailwind?
Giving a Tailwind margin to an element is simple. All you have to do is to assign the value of the CSS (e.g.) with the prefix
m- to the element you wish to style.
You can see some examples of these on the project below.
<div class="flex flex-row"><div class=" bg-gray-400 m-3 pt-4 rounded-lg"><span class="mt-8 bg-green-200">Target</span></div><div class=" bg-gray-400 m-3 rounded-lg"><span class="mr-8 bg-green-200">Target</span></div><div class=" bg-gray-400 m-3 rounded-lg"><span class="mb-8 bg-green-200">Target</span></div><div class=" bg-gray-400 m-3 rounded-lg"><span class="ml-8 bg-green-200">Target</span></div></div
The project we created will look like the image below.
Tailwind CSS border
The Tailwind border acts as a shield or edge for the box wrapped around every block-level HTML element.
You can see the border of any element by adding the property
border to your style.
In Tailwind CSS, you add classes to make your border spacing visible on an HTML block-level element. We all know that all HTML elements are block-level even if it doesn’t appear that way. Below are several Tailwind border classes available along with their properties.
The Tailwind border property is usually used when you wish to control the border styles.
What is Tailwind border?
The Tailwind border utility is in charge of controlling the border of an element. When you create an element, it comes with a border and so this utility allows you to control the border radius, border width, and border color of this element.
Tailwind border radius
Tailwind border-radius has to do with controlling the radius of an element using this utility.
How to use the Tailwind border-radius?
Giving any element in your project a Tailwind border-radius is done simply by adding a
rounded utility. You can go ahead to specify all sides or two sides of an element you wish to add the effect on, by combining the
rounded utility with the
rounded-t for the top of the element,
rounded-b for the bottom of the element,
rounded-l for the left side of the element,
rounded-r for the right side of the element, to give a border radius to any specific side of your choice.
Tailwind border style
The Tailwind border style utility is essential especially if you want to make a jaw-dropping design on your application.
There are many classes available to use here. This utility simply allows you to style your border elements. Some of these classes include
Tailwind border Width
The Tailwind border width is a class that controls the border width of an element.
You can make use of some of these classes
border-b-8 etc., to control the border width of your element.
The Tailwind border-top class controls the border width top of your element while the Tailwind border right controls the right border width of your element.
You can see some of the applications of these classes on the project below. You can check our blog on setting up your first project using tailwind css
<div class="border-soild border-4 border-gray-600 bg-gray-300 px-4 py-4 m-2 rounded-lg"></div><div class="border-dashed border-4 border-gray-600 bg-gray-300 px-4 py-4 m-1 rounded-lg"></div><div class="border-dotted border-4 border-gray-600 bg-gray-300 px-4 py-2 m-1 rounded-lg"></div><div class="border-double border-4 border-gray-600 bg-gray-300 px-4 py-2 m-1 rounded-lg"></div><div class="border-none border-4 border-gray-600 bg-gray-300 px-4 py-2 m-1 rounded-lg"></div>
our Tailwind Border project should look like the image below
At the end of today’s Tailwind CSS, we showed you how important Tailwind CSS Margin, padding, and border spacing are to a developer.
We also explained what they are and showed the classes available in Tailwind CSS padding, Tailwind margin, and border spacing tailwind. I hope you can use the Tailwind CSS border-spacing, padding, and margin better now.
- Link to the Github Code
- Get TailwindCSS PRO
- Link to Tailwind CSS docs
- tailwind 3.0 is finally out
Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template
Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast