How to Create a Box with HTML and CSS?

Last Updated : 09 Sep, 2024

A box is a basic building block in web design, used to contain text, images, or other content. Understanding how to create and style a box is crucial for building responsive and visually appealing web pages.

These are the below approaches to creating a box in HTML and CSS:

Table of Content

Using Basic CSS Properties
Using CSS Flexbox
Using CSS Grid

Using Basic CSS Properties

In this approach, we will use basic CSS properties. This is the most straightforward method to create a box is by using basic CSS properties like width, height, border, padding, and background-color.

Example: In the below example we are using the basic CSS properties to create a box with HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <style>
        .basic-box {
            width: 200px;
            height: 100px;
            border: 2px solid #000;
            background-color: #f0f0f0;
            padding: 10px;
            color: green;
        }
    </style>
    <title>Basic CSS Box</title>
</head>

<body>
    <div class="basic-box">
        Welcome to GeeksForGeeks!
        This is a basic box.
    </div>
</body>

</html>

Output:

Using CSS Flexbox

In this approach we will use CSS Flexbox which provides a more flexible way to align and distribute space within a container, making it easier to create boxes that adapt to different screen sizes.

Example: In below example we are using the CSS Flexbox to create a box with HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <style>
        .flex-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .flex-box {
            width: 250px;
            height: 100px;
            border: 2px solid #000;
            background-color: green;
            padding: 15px;
            color: white;
        }
    </style>
    <title>Flexbox Box</title>
</head>

<body>
    <div class="flex-container">
        <div class="flex-box">
            Welcome to GeeksForGeeks!
            This box is centered using Flexbox.
        </div>
    </div>
</body>

</html>

Output:

Using CSS Grid

In this approach we will use CSS Grid. This allows us for creating complex layouts easily including boxes that are part of a grid structure.

Example: In below example we are using the CSS Grid to create a box with HTML and CSS.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            height: 200px;
        }

        .grid-box {
            border: 2px solid #000;
            background-color: #e0e0e0;
            padding: 20px;
            color: green;
        }
    </style>
    <title>Grid Box</title>
</head>

<body>
    <div class="grid-container">
        <div class="grid-box">
            Welcome to GeeksForGeeks!
            This is a grid box.
        </div>
    </div>
</body>

</html>