CSS Box Model Flashcards
What is CSS Box Model
Idea that everything in CSS is a box.
What makes up the Box in Box Model
Inner ‘Content box’, surrounded by ‘Padding’, encased in a ‘Border’. Space between boxes is the ‘Margin’.
What CSS properties manipulates the content area?
Width and Height
Name the main Border Properties
Border-width
Border-style
Border-color
Define Border-width
Controls the thickness of the border
Define Border-color
Controls the color of the border
Define Border-style
Controls the line style - dashed, solid, etc.
A border of 5px is added to a 200x200 content box. What is the new size of the content box with border?
210x210px
What property can be set to have the border fit the established width and height parameters of content box?
box-sizing: border-box;
Write a border shorthand
border: width style color;
How do you make rounded corners in borders?
border-radius: px or %;
border-top-right-radius: 50%
border-bottom-left-radius: 50%
If adding multiple values to a border property, which order are the values applied?
top-right-bottom-left
What is padding?
Padding is the space between the content box and the border.
List the individual properties for padding.
padding-left:
padding-right:
padding-bottom:
padding-top:
What is padding shorthand
padding: 10px (applies to all sides)
padding: 5px 10px (vertical, horizontal)
What is margin?
Margin is the spacing outside of a box border between other elements.
List the individual properties of margin.
margin-top:
margin-right:
margin-bottom:
margin-left:
List margin shorthand property
Same as padding.
margin: 10px (applies to all sides)
margin: 5px 10px (vertical, horizontal)
Define Display property
Sets whether an element is treated as a block or inline element.
display: inline;
display: block;
What is ignored in the display property ‘display: inline;’
Width and height are ignored. Margin and padding push elements away horizontally but not vertically.
What is ignored in the display property ‘display: block;’
The block element breaks the flow of a document and width, height, margin and padding are all respected.
How does ‘display: inline-block;’ behave.
Behaves like an inline element but width, height, margin, and padding are all respected.
Define percentages as a relative value.
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)
Define EM’s.
Em’s are relative units.
