CSS Box Model

Question 1

What is CSS Box Model

Answer 1

Idea that everything in CSS is a box.

Question 2

What makes up the Box in Box Model

Answer 2

Inner ‘Content box’, surrounded by ‘Padding’, encased in a ‘Border’. Space between boxes is the ‘Margin’.

Question 3

What CSS properties manipulates the content area?

Answer 3

Width and Height

Question 4

Name the main Border Properties

Answer 4

Border-width
Border-style
Border-color

Question 5

Define Border-width

Answer 5

Controls the thickness of the border

Question 6

Define Border-color

Answer 6

Controls the color of the border

Question 7

Define Border-style

Answer 7

Controls the line style - dashed, solid, etc.

Question 8

A border of 5px is added to a 200x200 content box. What is the new size of the content box with border?

Answer 8

210x210px

Question 9

What property can be set to have the border fit the established width and height parameters of content box?

Answer 9

box-sizing: border-box;

Question 10

Write a border shorthand

Answer 10

border: width style color;

Question 11

How do you make rounded corners in borders?

Answer 11

border-radius: px or %;

border-top-right-radius: 50%
border-bottom-left-radius: 50%

Question 12

If adding multiple values to a border property, which order are the values applied?

Answer 12

top-right-bottom-left

Question 13

What is padding?

Answer 13

Padding is the space between the content box and the border.

Question 14

List the individual properties for padding.

Answer 14

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

Question 15

What is padding shorthand

Answer 15

padding: 10px (applies to all sides)
padding: 5px 10px (vertical, horizontal)

Question 16

What is margin?

Answer 16

Margin is the spacing outside of a box border between other elements.

Question 17

List the individual properties of margin.

Answer 17

margin-top:
margin-right:
margin-bottom:
margin-left:

Question 18

List margin shorthand property

Answer 18

Same as padding.

margin: 10px (applies to all sides)
margin: 5px 10px (vertical, horizontal)

Question 19

Define Display property

Answer 19

Sets whether an element is treated as a block or inline element.

display: inline;
display: block;

Question 20

What is ignored in the display property ‘display: inline;’

Answer 20

Width and height are ignored. Margin and padding push elements away horizontally but not vertically.

Question 21

What is ignored in the display property ‘display: block;’

Answer 21

The block element breaks the flow of a document and width, height, margin and padding are all respected.

Question 22

How does ‘display: inline-block;’ behave.

Answer 22

Behaves like an inline element but width, height, margin, and padding are all respected.

Question 23

Define percentages as a relative value.

Answer 23

Percentages are always relative to some other value. Sometimes the value is from the parent and other times it is a value from the element itself.

Width: 50%; (half the width of the parent)

line-height: 50% (half the font-size of the element itself)

Question 24

Define EM’s.

Answer 24

Em’s are relative units.

Question 25

How does em’s relate in font size?

Answer 25

In regards to font size, 1em is equal to the parent element. 2em is double the parent element.

Question 26

How does em’s relate to with other elements such as margins or padding?

Answer 26

With other properties, 1em is equal to the computed font-size of the element itself.

Question 27

Define rem’s

Answer 27

Root EM’s are relative to the root html element’s font-size. If root font-size is 20px, 1 rem is always 20px.

**Does not Stack like nested lists etc.