CSS property: margin MCQs Quiz | Class 10
This quiz covers important Multiple Choice Questions (MCQs) on the CSS property: margin, for Class X Computer Applications (Code 165), Unit 2: HTML. These questions focus on ‘Outer spacing’ concepts. After completing the quiz, submit your answers and download a detailed PDF of your results.
Understanding the CSS ‘margin’ Property
The CSS margin property is fundamental for controlling the outer spacing of elements on a webpage. It creates space around an element, pushing other elements away from it. This property is crucial for layout design and ensuring elements are positioned neatly without overlapping.
Key Concepts of Margin:
- Outer Spacing: Margin is the space outside the border of an element. It is distinct from
padding, which is the space inside the border, between the border and the content. - Individual Properties: You can control each side of an element’s margin individually using:
margin-top: Sets the margin space on the top of an element.margin-right: Sets the margin space on the right of an element.margin-bottom: Sets the margin space on the bottom of an element.margin-left: Sets the margin space on the left of an element.
- Shorthand Property: The
marginshorthand property allows you to set all four margins at once, or specific sets of margins more concisely.margin: value;– Applies the same margin to all four sides (top, right, bottom, left).margin: vertical horizontal;– Applies the first value to top and bottom, and the second value to right and left.margin: top horizontal bottom;– Applies the first value to top, second to right and left, and third to bottom.margin: top right bottom left;– Applies values clockwise to top, right, bottom, and left margins respectively.
- `margin: auto;` for Centering: When applied to a block-level element with a specified
width,margin: auto;will horizontally center the element within its container. This works by distributing the available horizontal space equally to the left and right margins. - Negative Margins: Margins can accept negative values, which can cause an element to overlap with its neighbors or pull elements closer than their natural spacing.
- Margin Collapsing: Vertical margins (top and bottom) of adjacent block-level elements can collapse. This means that the larger of the two margins will be used, rather than summing them up. Horizontal margins never collapse.
Margin Shorthand Examples:
| Declaration | Result |
|---|---|
margin: 10px; |
10px margin on all sides (top, right, bottom, left) |
margin: 15px 20px; |
15px margin on top and bottom, 20px margin on left and right |
margin: 5px 10px 15px; |
5px top, 10px left/right, 15px bottom |
margin: 5px 10px 15px 20px; |
5px top, 10px right, 15px bottom, 20px left |
margin: 0 auto; |
0px top/bottom, horizontally centers a block element with defined width |
Quick Revision Points:
margincreates space outside an element’s border.- Use
margin-top,margin-right,margin-bottom,margin-leftfor individual control. - The
marginshorthand property is versatile for setting multiple margins. margin: auto;is key for horizontal centering of block elements.- Vertical margins can collapse, using the larger of two adjacent margins.
- Negative margins are allowed, enabling element overlap.
Practice Questions:
- Which CSS property would you use to create space between the main content area and a sidebar div?
- If an element has
margin-top: 20px;and its adjacent element below it hasmargin-bottom: 30px;, what will be the effective vertical space between them due to margin collapsing? - Explain the difference between
margin: 10px 20px;andmargin: 10px 20px 30px 40px;. - How can you horizontally center an image element that is set to `display: block;` and has a fixed width of 300px?
- What happens visually if you apply a large negative `margin-left` to an element?
