Border vs. padding in CSS

Question

I'm attempting to understand the exact relation between padding and border in CSS.

Would it be accurate to say that a solid border of transparent color is essentially the same thing as the same amount of padding, and can be expected to behave similarly- except insofar as they will coexist on the same element rather than overwriting each other?

In other words, is there any case in which:

#Square1{
    padding: 50px;
}

, if replaced with:

#Square1{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

would be expected to display different behavior in any meaningful way, except if there was something like this in the same CSS file:

.ClassThatSquare1HappensToHave{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

, in which case you will effectively end up with twice the amount of border/padding/element-expanding space?

Answer 1

Maybe this is what you are looking for. Note how overflow behaves differently both in the content that is left displayed (which is clipped to the padding edge) and the position of the scrollbar, which sits outside padding, but inside border.

#Square1{
    padding: 50px;
}

#Square2{
    border-style: solid;
    border-width: 50px;
    border-color: transparent;
}

body {
  width:400px;
}

div {
  background-color:lightblue;
  height:100px;
  overflow:auto;
}

<div id="Square1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
  <hr>
  <div id="Square2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>

Answer 2

They both belong to CSS box model but they serve different purposes.

In the box model :

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height. (...)

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height(...)

If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

---

With that said, you should use padding whenever you want to give inner space and use border to give exactly what it states - a border - a line that if has padding will show after the padding area.