MCQs Of Class 10: Margin and Padding
1. Which of the following is used to create space outside the border of an element?
a) Padding
b) Margin
c) Border
d) Height
Answer: b) Margin
Explanation: Margin is used to create space outside the border of an element, pushing other elements away from the target element.
2. What does the padding property do?
a) Creates space outside the element
b) Creates space inside the element
c) Changes the color of the element
d) Adds a border around the element
Answer: b) Creates space inside the element
Explanation: Padding is used to create space inside an element, between the content and the element’s border.
3. Which of the following properties can be used to center a block-level element horizontally in CSS?
a) margin-top
b) margin-bottom
c) margin-left and margin-right (auto)
d) padding-left and padding-right (auto)
Answer: c) margin-left and margin-right (auto)
Explanation: Using margin-left: auto and margin-right: auto will center the element horizontally when a width is defined.
4. What is the default value of margin and padding in most elements?
a) 0
b) 10px
c) 20px
d) 15px
Answer: a) 0
Explanation: By default, both margin and padding are set to 0 for most elements in HTML, meaning there’s no space around or inside the element unless specified.
5. Which property is used to set the space between the content and the border of an element?
a) Margin
b) Padding
c) Border-spacing
d) Line-height
Answer: b) Padding
Explanation: Padding is used to create space inside the element, between the content and its border.
6. If you apply margin: 20px; to an element, what will happen?
a) It will add 20px of padding inside the element
b) It will add 20px of margin on all sides of the element
c) It will add 20px of space above the element
d) It will add 20px of space below the element
Answer: b) It will add 20px of margin on all sides of the element
Explanation: margin: 20px; applies a margin of 20px to the top, right, bottom, and left of the element.
7. What happens when two elements with margins are adjacent to each other?
a) Both margins are added together
b) The smaller margin is ignored
c) The larger margin is applied
d) The elements overlap
Answer: c) The larger margin is applied
Explanation: This is known as margin collapse. When two block elements with margins are adjacent, the larger margin takes precedence, and the smaller margin is ignored.
8. Which of the following defines a negative margin?
a) margin: -10px;
b) margin: 0px;
c) margin: 10px;
d) margin: auto;
Answer: a) margin: -10px;
Explanation: Negative margin values pull the element in the direction of the negative value (e.g., up, left).
9. How do you set the padding of an element to 50px on all sides?
a) padding: 50px 0px 50px 0px;
b) padding: 50px;
c) padding: 50px 50px 50px 50px;
d) padding: 0px 50px 0px 50px;
Answer: b) padding: 50px;
Explanation: Setting padding: 50px; applies 50px of padding on all four sides (top, right, bottom, left).
10. Which of the following CSS properties is used for space between elements outside their border?
a) Padding
b) Margin
c) Border
d) Height
Answer: b) Margin
Explanation: Margin is used to create space outside an element’s border, pushing adjacent elements away.
11. Which property can be used to create space between the content and the border of an element, but not outside the border?
a) Margin
b) Padding
c) Border
d) Content
Answer: b) Padding
Explanation: Padding is used for creating space inside the element, between the content and the element’s border.
12. How can you apply different margins to the top, right, bottom, and left sides of an element?
a) margin-top, margin-right, margin-bottom, margin-left
b) margin: 10px 20px 30px 40px;
c) margin: 10px 20px 30px;
d) margin-all
Answer: a) margin-top, margin-right, margin-bottom, margin-left
Explanation: You can use individual margin properties to specify margins for each side: margin-top, margin-right, margin-bottom, and margin-left.
13. What happens if you set margin: auto on a block-level element with a defined width?
a) It centers the element horizontally
b) It centers the element vertically
c) It adds padding inside the element
d) It collapses the margin
Answer: a) It centers the element horizontally
Explanation: When margin: auto is applied to a block-level element with a defined width, it centers the element horizontally within its parent container.
14. Which of the following is NOT a valid CSS margin property?
a) margin-top
b) margin-left
c) margin-all
d) margin-right
Answer: c) margin-all
Explanation: There is no margin-all property in CSS. Margin can be specified for each side separately: margin-top, margin-right, margin-bottom, and margin-left.
15. What is the result of setting margin: 0px; padding: 10px; on an element?
a) The element will have 10px space outside and 0px space inside
b) The element will have 10px space inside and 0px space outside
c) Both margin and padding will be 10px
d) Both margin and padding will be 0px
Answer: b) The element will have 10px space inside and 0px space outside
Explanation: The margin is set to 0px, so there is no space outside the element, while the padding is set to 10px, creating space inside the element.
16. Which property is used to specify the space inside the border of an element?
a) Border
b) Margin
c) Padding
d) Width
Answer: c) Padding
Explanation: Padding is used to specify space inside the element, between the content and the border.
17. Which of the following methods is used to set margin and padding values in CSS?
a) px, em, rem, %, and auto
b) auto and zero only
c) % and border
d) px and cm only
Answer: a) px, em, rem, %, and auto
Explanation: Margin and padding values can be set in units such as px, em, rem, %, and auto.
18. Which of the following values will prevent the margin collapse between two adjacent elements?
a) padding
b) margin-top
c) margin-left
d) border
Answer: d) border
Explanation: Adding a border between two elements will prevent margin collapse, as borders force space between adjacent elements.
19. How can you apply equal padding to all four sides of an element?
a) padding: 10px 20px 30px 40px;
b) padding: 10px 20px;
c) padding: 10px;
d) padding: 0px 10px;
Answer: c) padding: 10px;
Explanation: padding: 10px; applies 10px of padding on all four sides of the element.
20. Which property is used to set the top margin of an element?
a) margin-bottom
b) margin-top
c) padding-top
d) padding-bottom
Answer: b) margin-top
Explanation: margin-top is used to set the space above an element.
21. What is the effect of setting a negative value for margin?
a) Pulls the element inward or closer to the adjacent element
b) Expands the space around the element
c) Shrinks the element
d) Increases the height of the element
Answer: a) Pulls the element inward or closer to the adjacent element
Explanation: Negative margins pull the element in the direction of the negative value (up, left, etc.).
22. Which CSS property controls the spacing between content and its border in a box model?
a) Margin
b) Padding
c) Border-spacing
d) Border-width
Answer: b) Padding
Explanation: Padding controls the space between the content and the border inside an element’s box model.
23. How do you reset all margins and paddings to zero in CSS?
a) margin: 0px; padding: 0px;
b) margin-left: 0px; padding-top: 0px;
c) margin: auto; padding: auto;
d) margin-left: 0px; padding-left: 0px;
Answer: a) margin: 0px; padding: 0px;
Explanation: margin: 0px; padding: 0px; resets all margins and paddings of an element to zero.
24. What does margin: 10px 20px 30px; do in CSS?
a) It applies 10px to top, 20px to right/left, and 30px to bottom
b) It applies 10px to all sides
c) It applies 10px to left, 20px to top, and 30px to right
d) It applies 10px to top, 20px to bottom, and 30px to left
Answer: a) It applies 10px to top, 20px to right/left, and 30px to bottom
Explanation: This shorthand property applies margins to the top, left/right (same), and bottom sides of the element.
25. How can you reset the default margin and padding of the body element in HTML?
a) body { margin: 0; padding: 0; }
b) body { margin-left: 0; padding-top: 0; }
c) body { margin: 20px; padding: 10px; }
d) body { margin: 10px; padding: 0; }
Answer: a) body { margin: 0; padding: 0; }
Explanation: This CSS rule resets the default margin and padding for the body element to zero.
26. What is the purpose of margin: 0 auto;?
a) It centers the element horizontally with equal margins
b) It removes the top and bottom margins
c) It sets the margin to zero on the left and right
d) It applies padding of zero on all sides
Answer: a) It centers the element horizontally with equal margins
Explanation: margin: 0 auto; sets the top and bottom margins to 0 and centers the element horizontally by applying equal left and right margins.
27. How can padding be applied to just the top and bottom of an element?
a) padding: 20px 30px;
b) padding: 20px;
c) padding: 20px 30px 40px;
d) padding: 0px 20px 40px;
Answer: a) padding: 20px 30px;
Explanation: This shorthand property applies 20px to the top and bottom and 30px to the left and right.
28. What is the effect of using margin: 0 auto; on an element with a defined width?
a) It centers the element horizontally
b) It centers the element vertically
c) It adds margin on all four sides
d) It collapses the margins
Answer: a) It centers the element horizontally
Explanation: margin: 0 auto; centers the element horizontally by applying equal margins to both sides when a width is defined.
29. Which is the correct CSS shorthand for applying different padding to all sides of an element?
a) padding: 5px 10px 15px 20px;
b) padding: 5px;
c) padding-top: 10px; padding-right: 15px;
d) padding: 5px 10px;
Answer: a) padding: 5px 10px 15px 20px;
Explanation: This shorthand applies different padding values for the top, right, bottom, and left sides respectively.
30. Which of the following is true about padding in CSS?
a) Padding can be applied only to the left side of the element
b) Padding can increase the size of an element
c) Padding does not affect the box model
d) Padding creates space outside the element
Answer: b) Padding can increase the size of an element
Explanation: Padding adds space inside the element, which increases its overall size.
31. Which of the following will remove all padding from an element?
a) padding: 0px;
b) padding: 10px;
c) padding: auto;
d) padding: none;
Answer: a) padding: 0px;
Explanation: padding: 0px; removes all padding from the element.
32. How would you create a layout with a fixed-width container and variable margin on the left?
a) width: 500px; margin-left: 20px; margin-right: auto;
b) margin-left: 20px; margin-right: 0px;
c) margin-left: auto; margin-right: auto;
d) margin-left: 0px; margin-right: auto;
Answer: a) width: 500px; margin-left: 20px; margin-right: auto;
Explanation: The width is fixed at 500px, and the left margin is set to 20px, with the right margin set to auto, allowing the container to shift leftward.
33. What happens if padding is applied to a parent element?
a) It increases the size of the child elements
b) It adds space inside the parent but does not affect child elements
c) It reduces the size of the child elements
d) It removes space inside the parent
Answer: b) It adds space inside the parent but does not affect child elements
Explanation: Padding increases the space inside the parent element, but it does not affect the size or position of the child elements directly.
34. If two adjacent elements have a margin of 20px each, what is the total space between them?
a) 40px
b) 20px
c) 10px
d) 0px
Answer: a) 40px
Explanation: Since margins don’t collapse between two adjacent block elements, the total space between them will be the sum of both margins, resulting in 40px.
35. Which CSS property allows you to control the space between elements that are not adjacent?
a) Padding
b) Margin
c) Line-height
d) Word-spacing
Answer: b) Margin
Explanation: Margin controls the space between adjacent elements, whereas padding is for space within an element.
36. What is the effect of setting a margin value of 0px for all elements in a web page using * selector?
a) Removes all margins from the entire page
b) Adds 0px of margin to the page
c) Sets padding to 0px
d) Sets the width of elements to 0px
Answer: a) Removes all margins from the entire page
Explanation: The * selector applies the margin value to all elements on the page, effectively removing all margins.
37. Which property is used to define space between a table cell’s content and its border?
a) margin
b) padding
c) border-spacing
d) cell-spacing
Answer: b) padding
Explanation: Padding in a table cell defines the space between its content and the cell’s border.
38. What happens when a margin is set to auto in CSS?
a) It centers the element horizontally within its parent container
b) It removes all padding
c) It sets a fixed margin value
d) It collapses the element’s margin
Answer: a) It centers the element horizontally within its parent container
Explanation: Setting margin to auto for block-level elements with a fixed width will horizontally center them within the parent.
39. What happens if padding is used on a floated element?
a) It will affect the element’s position
b) Padding only affects the width of the element
c) Padding does not affect floated elements
d) Padding will create space outside the floated element
Answer: b) Padding only affects the width of the element
Explanation: Padding adds space inside the element and does not affect its floating behavior.
40. How do you add space between inline-block elements?
a) margin
b) padding
c) white-space
d) border
Answer: a) margin
Explanation: Applying a margin to inline-block elements will create space between them.
41. How can you apply margin and padding only on specific sides?
a) Use separate properties like margin-top, padding-left, etc.
b) Use padding-top-bottom
c) Use only margin-top
d) Use padding-left-right
Answer: a) Use separate properties like margin-top, padding-left, etc.
Explanation: You can apply margin and padding to specific sides by using properties like margin-top, margin-right, padding-left, etc.
42. Which CSS value would you use for the margin to center a block-level element?
a) margin: auto;
b) margin: center;
c) margin: 0 auto;
d) margin: 20px auto;
Answer: c) margin: 0 auto;
Explanation: margin: 0 auto; is the correct shorthand to horizontally center a block-level element.
43. Which property allows you to define the space between the content of an element and its border?
a) margin
b) padding
c) border-spacing
d) width
Answer: b) padding
Explanation: Padding defines the space between an element's content and its border.
44. What does border-collapse: collapse; do in CSS?
a) Merges table borders into one
b) Creates space between table cells
c) Changes the table’s background color
d) Collapses the table’s padding
Answer: a) Merges table borders into one
Explanation: border-collapse: collapse; merges adjacent table borders into a single border.
45. What happens when padding is added to a box with box-sizing: border-box;?
a) Padding is added to the element's content box
b) Padding does not affect the element’s width
c) Padding increases the width of the element
d) Padding affects only the height
Answer: b) Padding does not affect the element’s width
Explanation: When box-sizing: border-box; is used, padding is included within the total width of the element, so it doesn’t increase the width.
46. Which of the following is correct for applying padding to all sides of an element?
a) padding: 10px;
b) padding: 10px 20px 30px;
c) padding-top: 10px; padding-right: 20px;
d) padding: 20px 10px;
Answer: a) padding: 10px;
Explanation: This shorthand applies 10px padding to all four sides of the element.
47. How do you remove margins from all elements on the page?
a) * { margin: 0; }
b) * { margin-top: 0; }
c) body { margin: 0; }
d) html { margin: 0; }
Answer: a) * { margin: 0; }
Explanation: The universal selector * will remove the margin from all elements on the page.
48. Which of the following properties is used to specify the space between cells in a table?
a) padding
b) margin
c) cell-spacing
d) border-spacing
Answer: d) border-spacing
Explanation: border-spacing controls the space between table cells.
49. How do you set padding on just the left and right sides of an element?
a) padding: 10px 20px;
b) padding: 20px 10px 30px;
c) padding: 0px 10px 0px;
d) padding: 10px;
Answer: a) padding: 10px 20px;
Explanation: This shorthand sets 10px padding on the top and bottom, and 20px on the left and right.
50. What will happen if padding is applied to a floated element?
a) It will cause the element to align horizontally
b) Padding does not affect floated elements
c) It will affect the layout of the surrounding elements
d) It will make the element take up more space
Answer: d) It will make the element take up more space
Explanation: Padding increases the size of the floated element and affects its total space on the page.
No comments:
Post a Comment