The Box Model

Question 1

You can customise the borders of an elements box via the properties of border-width, border-style, and border-color individually, but how do you modify all of these properties on one line?

Answer 1

border: 2px solid #FFF;

Question 2

You can not view a box’s border if the border’s style has not been set. With what property can give you freedom to customise a box’s border and make it visible?

Answer 2

border-style: 2px;

Question 3

What is the difference between padding and margin?

Answer 3

Padding refers to the spacing between an elements content and it’s border, margin refers to the spacing outside of the border/box and in between other elements.

Question 4

How can you change a border so that it is not a square, but a circle?

Answer 4

border-radius: 100%;

Question 5

With various properties in the box model such as padding or margin etc where you can modify all four sides, what is a shortcut if left + right are the same and top + bottom too?

Answer 5

padding: 5px 10px;

Question 6

The margin property allows you to centre content with the ‘auto’ value as this will automatically centre the selected element, however what else needs to be added for this to function correctly?

Answer 6

h1 {
margin: 10 auto;
width: 100%;
}

Question 7

All major web browsers have a default stylesheet they use in the absence of an external stylesheet, these default stylesheets are called user agent stylesheets. Many developers choose to reset these default values so that they can truly work with a clean state. How would you start off fresh, give the example of code.

Answer 7

• {
  margin: 0;
  padding: 0;
  }

Question 8

What is the difference between the visibility property when it’s valued to hidden and the display property when it’s valued to none.

Answer 8

When the visibility property is valued to hidden the selected content is hidden, but there will still be an empty space where this element is intended to be. Where as, with display none, the selected content is hidden and there will not be an empty space left for this element

Question 9

What value of a certain property is a valuable tool for creating vertical or horizontal layouts?

Answer 9

display: flex;