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.**
What’s the dimension of the content?
Content size is determined by width and length.
