Which part of this visual is the actual HTML element?

This is a helpful FreeCodeCamp page that explains padding, margin, and border: https://www.freecodecamp.org/learn/responsive-web-design/basic-css/adjust-the-padding-of-an-element

It provides a visual to understand the difference between them. However, which part of the visual represents that actual HTML element? Is it the space between the two padding rectangles? The article mentions that all HTML elements are essentially rectangles. Which rectangle is the HTML element in this visual?

See for yourself by adding this:

html {
    border:1px solid red;
1 Like

HTML element is an tag which starts with a “<>” openning tag and a closing tag “</>
for example


is an h2 element .

h2 {
background: red;

There we go, element is an rectangle, we proved it.

now add padding:

h2 {
background: red;
padding: 20px;

notice the difference ?

now add margin

margin: 40px;

there we go! now we have 40px margin to h2 element(tag)

1 Like

this is perfect, thank you!

Glad i could help! do share more problems.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.