How to use tailwind css padding, margin and border in your project.
Tags: tailwindcss, programming, webdev, css
Published: 2021-10-10 00:43:56

---
title: How to use tailwind css padding, margin and border in your project.
published: true
date: 2021-01-10 01:16:04 UTC
tags: [tailwindcss, programming, webdev, css]
canonical_url: https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project
cover_image: https://www.devwares.com/blog/images/how-to-use-tailwind-css-padding-margin-border.png
---

As important as CSS margin, padding, and border are, most developers often struggle to understand this concept. 
New developers usually use these properties without realizing or acknowledging their importance when rendering items on our page.
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
- content
- Tailwind CSS padding
- Tailwind CSS margin
- Tailwind CSS border
- Project using these properties



## Box Model

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 a 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.

## Content

The content has to do with the value of the specified HTML element. This could be an `h3`, an `a` tag, or even an `<img>` element.


## 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.

In Tailwind CSS, the padding size is usually set using the shorthand `padding` and a class of `p`. Other classes include `pb`, `pt`,`py`,`px` etc.

The Tailwind CSS 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 documentations.

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

## Tailwind CSS margin

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 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 `mb`, `mr`, `mt` `my`, `mx` etc.

You can check other classes and their properties in the Tailwind CSS documentation.
The [margin](https://www.devwares.com/tailwindcss/classes/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.

## Tailwind CSS border
The 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 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. 
The classes available in Tailwind CSS, along with their properties, are

Classes ---------------- Properties
border-solid ----------- border-style: solid;
border-dashed ---------- border-style: dashed;
border-dotted ---------- border-style: dotted;
border-double ---------- border-style: double;
border-none  ----------- border-style: none;

The border property is usually used when you wish to control the border styles.

## Project using these properties
At this point in our Tailwind CSS tutorial, we will build a frame box showing the properties of the border, margin, and padding in action.

The first step is to install Tailwind CSS in your project. We covered that aspect in our previous articles. You can check them out.

## Padding, border and margin 
We are going to build a text element. It will be represented in block form, and we can see the effect of padding and border.

**Code:**

```html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin, padding and border effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body class="text-center">
    <h1 class="text-center text-purple-500 text-5xl font-bold">
        DEVWARES
    </h1>
    <div class="flex justify-center">
        <div class="p-4 bg-purple-300 w-24 h-24">
            <div class=" border-2 border-purple-800  bg-purple-600 w-30 h-30"> padding and border</div>
        </div>
</body>

</html>
```

The project we created will like the image below
 
![Tailwind CSS in React](https://www.devwares.com/blog/images/how-to-use-tailwind-css-padding-2.png)

The next one is building the effect of margin 

**Code:**

```html
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin, padding and border effect</title>
    <link rel="stylesheet" href="style.css">
</head>

<body class="text-center">
    <h1 class="text-center text-purple-500 text-5xl font-bold">
        DEVWARES
    </h1>
    <div class="flex justify-center">
        <div class="m-8 bg-purple-300 w-24 h-24">
            <div class=" m-4 border-2 border-purple-800  bg-purple-600 w-30 h-30">margin and border</div>
        </div>
    </div>
</body>

</html>
```

The project we created will look like the image below.

![Tailwind CSS in React](https://www.devwares.com/blog/images/how-to-use-tailwind-css-padding-3.png)
 

###Conclusion

At the end of today’s Tailwind CSS, we showed you how important Tailwind CSS Margin, padding, and the border are to a developer. 

We also explained what they are and showed the classes available in Tailwind CSS padding, margin, and border.
I hope you can use the Tailwind CSS border, padding, and margin better now.

## Design and code Tailwind CSS websites 3x faster

We created a tool to visually build Tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)

## Resources 

- [How to create Tailwind CSS Modal](https://www.devwares.com/blog/how-to-create-tailwind-css-modal)

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Get Contrast PRO](https://www.devwares.com/product/contrast-pro)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)