The Box Model

Question 1

What are the 5 things of the box model

Answer 1

Margin, Border, Padding, Width and Height (Content)

Question 2

Width and Height

Answer 2

The width and height of the content area

Question 3

Padding

Answer 3

The amount of space between the content area and the border

Question 4

Border

Answer 4

The thickness and style of the border surrounding the content area and padding

Question 5

Margin

Answer 5

The amount of space between the border and the outside of the element

Question 6

How to change the height and width of an element

Answer 6

Using the height and width properties
Example:
p {
height: 80px;
width: 240px;
}

Question 7

Border Width

Answer 7

The thickness of the border, can be set in pixels or with the keywords thin, medium, or thick

Question 8

Border style

Answer 8

The design of the border, there are 10 different ones with the most common being none, dotted, and solid

Question 9

Border color

Answer 9

The color of the border

Question 10

How to change how a border looks

Answer 10

With the border property
Example:
p {
border: 3px solid coral;
}

Question 11

How to change the border radius?

Answer 11

With the border-radius property
Example:
p {
border-radius: 5px;
}

Question 12

How to make a border a perfect circle?

Answer 12

By setting the height and width to be the same, then making the border radius’ value 50%

Question 13

How do you change how large the padding is?

Answer 13

Using the padding property
Example:
h1 {
padding: 10px;
}

Question 14

How do you change the amount of padding on each side?
For 4, 3, and 2 value

Answer 14

By adding multiple numbers
Example:
h1 {
padding: 5px 10px 15px 5px <em>This would mean (top, right, bottom, left)</em>
}
For 3 values, the middle value would set the left and right padding
For 2 values, the first one sets the top and bottom, and the second one does right and left.
*** also works for margin

Question 15

How to change the margin of an element

Answer 15

Using the margin property
Ex:
p {
margin: 20px;
}

Question 16

How to change the margin on only one specific side?

Answer 16

Using the margin-right, top, bottom, or left property
Example:
p {
margin-bottom: 15px;
}

Question 17

What does the auto value do?

Answer 17

You add it in the margin property after setting a width and it will center the element in the margins. The margin must be set to zero first
Ex:
p {
width: 400px;
margin: 0 auto;
}

Question 18

How to limit how wide or tall something is?

Answer 18

With the min-width, max-width, min-height, and max-height property
Example:
p {
min-width: 300px;
max-width: 600px;
}

Question 19

Why would you want to limit how wide or tall something is?

Answer 19

To stop it from distorting to much if it is on another screen

Question 20

How to stop overflow?

Answer 20

Using the overflow property, you can set it to hide, scroll, and visible(the default one)
Example:
p {
overflow: scroll;
}

Question 21

What is the first thing you usually do when coding in CSS

Answer 21

set the margin and padding of everything to 0

Question 22

How to change the visibility of an element

Answer 22

Using the visibility property with the value hidden, visible, and collapse
Example:
p {
visibility: hidden;
}