Spacing Flashcards
What HTML element creates a line break, similar to pressing the enter key?
<br></br>
What HTML element creates a line break, similar to pressing the enter key?
<hr></hr>
What does the margin property do?
Adds space outside an element, like a cushion around it.
What are the four margin shorthand properties?
margin-top, margin-right, margin-bottom, margin-left
How can margin values be defined?
Length, percentage (based on containing block’s width), or auto.
What does a negative margin do?
Reduces space between adjacent sibling elements, potentially causing overlap.
How does margin collapse work?
The largest margin value of two adjoining block elements is used.
How can margin collapse be prevented?
Use absolute positioning, float, or flex items with margins inside a flexbox.
What does the padding property do?
Creates space inside an element’s box, like insulation.
What are the four padding shorthand properties?
padding-top, padding-right, padding-bottom, padding-left
How does position: relative affect an element?
It maintains its place in the document flow while allowing adjustments.
How does position: absolute affect an element?
It is positioned based on its closest relatively positioned ancestor.
How does position: fixed affect an element?
It is positioned relative to the viewport and does not move when scrolling.
How does position: sticky affect an element?
It behaves like relative until it reaches a threshold, then sticks.
What property is used in Grid and Flexbox to create space between elements?
gap
What are the two gap shorthand properties?
row-gap, column-gap
How can consistent spacing be maintained across a UI?
Using CSS variables like –gutter and –spacing.
