Why does any html element require 'padding' & 'border'?

Question

Every html element is a box shape element.

Each box is surrounded by boundaries - padding, border, margin.

--

margin gives white space between two elements.

Why would a box require three boundaries? Would margin that creates white space between any two boxes do not suffice?

Answer 1

You need a border because sometimes people want a visible border between elements, not white space.

You need padding because people want space between the content and the border and between the border and the next element.

Answer 2

Each one of those properties controls a different aspect of the box.

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Border

The CSS border properties allow you to specify the style, size, and color of an element's border.

All three properties together give you great flexibility in styling HTML elements. If you only had margin you would only be able to create space between elements. Plus, padding gives you the ability to create "separation" between elements without collapsing margins.

Here's a good reference for more details: When to use margin vs padding in CSS

Answer 3

Not if you also need a border, or some padding.

Though it is true that both margin and padding create space, there is a difference between where they create space. And that difference is the border.

A border, as the word already implies, is to create a visible border. Padding creates space between said border and the content within. But padding can also be used to create some room around an element when it has a background, for example.

To better illustrate the differences, I'll create a couple of snippets:

This snippet has no border, margin or padding, so no spacing.

.row {
  background: red;
}

.column {
  background: green;
}

.blue {
  background: blue; 
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

This snippet has margins, giving it some space around the element, which is evident because of the background colors.

.row {
   background: red; 
}

.column {
  margin: 10px;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

This example has both a margin and a border, giving you a wider range of coloring options, as well as more space. Yet, you would be unable to give the different spaces a different color with just a margin.

.row {
  background: red;
}

.column {
  margin: 10px;
  border: 5px solid purple;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

This last example has it all. As you can see, the padding creates space within the box, inside of the border. Added to that, you can also see more of the background color of the element.

.row {
  background: red;
}

.column {
  margin: 10px;
  border: 5px solid purple;
  padding: 20px;
  background: green;
}

.blue {
  background: blue;
}

<div class="row">
  <div class="column">
    Some text
  </div>
  <div class="column blue">
    Some other text
  </div>
</div>

Though you could create just as much space between the elements with margin: 35px; you could not get this (* cough *) beautifully colorful display.

Answer 4

Margins and padding have two different uses:

1. Margin collapse on each other while padding doesn't. Two elements side-by-side, each having margin: 10px will be 10px apart. But if they instead had padding: 10px, the would be 20px apart. Edit I misspoke. I was trying to refer to margin-collapsing, which happens on margin-top and margin-bottom at times. More can be read here: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing; and additional discussion here: When to use margin vs padding in CSS
2. When applying a border, padding will be applied inside the border, pushing it away from the element. Margins are applied outside the border.
3. Styling such as background-color will be applied to padding, but not to margin.
4. With margins, negative values are allowed. Not so with padding.

From MDN:

Padding

The padding area extends to the border surrounding the padding. When the content area has a background, color, or image set on it, this will extend into the padding, which is why you can think of the padding as extending the content. The padding is located inside the padding edge, and its dimensions are the padding-box width and the padding-box height.

Margin

The margin area extends the border area with an empty area used to separate the element from its neighbors. It is the area inside the margin edge, and its dimensions are the margin-box width and the margin-box height.

Answer 5

Elements don't require to have any of the above. What you see is just an illustration about the box-model of the element which just tells you that there is no margin, padding or border.

Important difference between marginand padding is that margin pushes other elements away from the current element, while padding defines the space between the contents of an element and its' outline.

Border is simply a border. It creates a line as a visual separator between elements, and is not really intended to determine spacing between them.

A good explanation is given on the w3schools website.