Which part of this visual is the actual HTML element?

[daalmo]

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?

[jsdisco]

See for yourself by adding this:

html {
    border:1px solid red;
  }

[seekinfox]

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

<h2>heading</h2>

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)

[daalmo]

this is perfect, thank you!

[seekinfox]

Glad i could help! do share more problems.