The Box Model of Website Styling
border-width property may be specified using one, two, three, or four values.
When one value is specified, it applies the same width to all four sides.
When two values are specified, the first width applies to the top and bottom, the second to the left and right.
When three values are specified, the first width applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the widths apply to the top, right, bottom, and left in that order (clockwise).
padding CSS property sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.
margin CSS property sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
This website if a great interactive way to understand all the features of the CSS box model
To recreate this picture
I need to set the border-width and height to 200px,then added a 10px border and 20px padding using the following code
width: 200px; height: 200px; border: solid 10px; padding: 20px;
then to aling the middle-container to touch the top-containers corner I then had to add some padding - to cacualte how much padding to use I added the total width + height + boarderx2 + boarderx2 = 460px of the top-container.