DEV Community

Cover image for Understanding Padding, Margin, and Border in HTML
Sona
Sona

Posted on

Understanding Padding, Margin, and Border in HTML

In HTML, the padding, margin, and border properties play crucial roles in defining the layout and spacing of elements on a webpage. Let’s delve into each of these properties, exploring their functions, and providing examples with code and output.

  1. Padding Padding is the space between the content of an element and its border. It helps control the internal spacing, giving elements breathing room.

HTML Code:

`<!DOCTYPE html>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Padding Example</title>

<style>

    .example-box {

        padding: 20px; /* Apply 20 pixels of padding to all sides */

        background-color: #f0f0f0;

    }

</style>
Enter fullscreen mode Exit fullscreen mode
<div class="example-box">

    This is an example box with padding.

</div>
Enter fullscreen mode Exit fullscreen mode

`

Padding, Margin, and Border in HTML

Understanding Padding, Margin, and Border in HTML, HTML tutorial, HTML tutorial

favicon codemagnet.in

Top comments (0)