1.2 CSS Box Model Flashcards
What does the CSS box model look like?
What does border mean?
It’s usually a thin edge just outside of
the main element, serves as a boundary.
What’s the difference between padding and margin?
Padding is inside the border.
Margin is outside the border.
What is the box?
The box is the content.
When do you use padding?
When space is needed immediately
around a specific element.
Are paddings and margins used together?
Yes
Most items tend to have a combination
of both margins and paddings.
Can margins be used between elements?
Yes, margin can be applied outside to separate elements.
Why is the box model important?
Every web page is composed of nothing but boxes.
What about circles, triangles, and abstract,
do they appear as boxes to the browser?
From browser POV, every item has the box shape, regardless of how the content appears to the end user.
What happens if the content is missing padding?
It looks wrong.
It needs more white space in relation to other elements.
What’s happening in this image when it’s margin only?
There is margin keeping elements apart,
but the content itself is lacking space.
Does adding borders, margins, and padding change dimensions?
Yes
Every facet adds to the total dimension of the content.
Can margins hold negative values?
Yes
Margins can be negative.
Paddings cannot.
Can the value of padding be set to auto?
No, padding cannot accept auto as a value.
Only margins can be set to auto
What are the 4 ways that padding and margin improve UI?
An effective use of white space is important to ensure
- *focus,**
- *readability,**
- *hierarchy,**and
- *understanding.**
Should you use margin or padding in place of the other?
No
Padding and margins were never meant to be used interchangeably.
What’s the dimension of the content?
Content size is determined by width and length.
What properties impact the depth of padding?
The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.
What properties control border area depth?
The thickness of the borders are determined by the border-width and shorthand border properties.
What properties control the size of margins?
The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.
Why do margins collapse?
When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.
