December 19, 2018 · coding CSS

The Box Model of Website Styling

The 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).

The 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.

The 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

111png

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.

  • LinkedIn
  • Tumblr
  • Reddit
  • Google+
  • Pinterest
  • Pocket