Chakra UI Margin and padding

Chakra UI’s Margin and Padding utilities enable developers to easily add space around and inside elements. Margins create space outside elements, while paddings add space inside them. This simplifies layout design, ensures consistent spacing between components, and enhances user experience. Whether for responsive layouts or custom designs, Chakra UI makes styling web apps efficient and visually appealing.

Prerequisites:

• NPM and NodeJS
• React
• HTML, CSS, and JavaScript
• ReactJS ChakraUI

Approach:

We will explore how to utilize margin and padding style props of Chakra UI. There are many different Style props are available for Chakra UI Margin and Padding like m(margin), mt(margin top), mb(margin bottom), ml(margin left), mr(margin right) and so on and also similar to the padding like p, pt, pb, pl and pr. In the following example we are using p for padding and m for margin and you can customize your website according to the requirements by using them to customize a component.

Steps to Create the Project:

Step 1: Create a React application using the following command:

npx create-react-app gfg

Step 2: After creating your project folder(i.e. my-app), move to it by using the following command:

cd gfg

Step 3: After creating the React application, Install the required package using the following command:

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6

Project Structure:

Project Structure

The updated dependencies in package.json will look like this:

"dependencies": {
    "@chakra-ui/react": "^2.8.2",
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "framer-motion": "^11.0.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: Below is the basic example of the Chakra UI Margin and Padding:

Javascript

// App.js File
import React from 'react';
import {
    ChakraProvider,
    Box, Text
} from '@chakra-ui/react';

function App() {
    return (
        <ChakraProvider>
            <Text
                color="#2F8D46"
                fontSize="2rem"
                textAlign="center"
                fontWeight="400"
                my="1rem">
                GeeksforGeeks -
                React JS Chakra UI concepts
            </Text>
            <Box p="4" m="4"
                bg="teal.500" color="white"
                w="50%" mx="auto">
                This is a Box with
                padding and margin applied.
            </Box>
        </ChakraProvider>
    );
}

export default App;

Steps to run the application:

npm start

Output:

Chakra UI Margin and Paddin