Prelims - CSS padding

Question 1

is used to create space around an element’s content, inside of any defined borders

Answer 1

CSS Padding

Question 2

CSS has properties for specifying the padding for each side of an element

Answer 2

padding-top
padding-right
padding-bottom
padding-left

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

Question 3

All the padding properties can have the following values

Answer 3

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

Negative values are not allowed

Question 4

If the padding property has four values the shorthand would be

Answer 4

padding: 25px 50px 75px 100px;

top padding is 25px
right padding is 50px
bottom padding is 75px
left padding is 100px

Question 5

This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease

Answer 5

box-sizing

div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}