Primer CSS Reset Margins
Primer CSS is an open-source component-rich CSS library that helps developers to develop beautiful and responsive websites which work on devices of any screen size. It has a wide range of components that fulfills the need of any website.
In this article, we will be seeing Primer CSS Reset Margins. The Reset Margin Classes are used to set the margins on any element to zero. The use of reset margin classes will override any default margin on the element.
Primer CSS Reset Margins Classes:
- m-0: This class is used to reset the margin on all four sides to zero.
- mt-0: This class is used to reset the margin on the top of the element to zero.
- mr-0: This class is used to reset the margin on the right of the element to zero.
- mb-0: This class is used to reset the margin on the bottom of the element to zero.
- ml-0: This class is used to reset the margin on the left of the element to zero.
- mx-0: This class is used to reset the horizontal margin of the element to zero.
- my-0: This class is used to reset the vertical margin of the element to zero.
Syntax:
<div class="mt-0"> ... </div>
Example 1: The example below shows the use of m-0, mt-0, mr-0, ml-0, and mb-0 classes to reset the margins on an element.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Reset Margins - Primer CSS</title> <link href= rel="stylesheet" /> <style> /* Margin to provide spacing between the div elements */ .d-flex > div { margin-top: 20px; } /* All the inner div elements will have the default margin of 20px */ /* This will be overridden by the reset margin classes */ .inner { margin: 20px; } </style> </head> <body> <div class="text-center"> <h2 class="color-fg-success"> GeeksforGeeks </h2> <h4>Primer CSS - Reset Margins</h4> </div> <div class="d-flex flex-justify-around flex-items-center flex-column"> <div class="color-bg-closed-emphasis"> <div class="inner color-bg-danger m-0"> m-0 </div> </div> <div class="color-bg-closed-emphasis"> <div class="inner color-bg-danger mt-0"> mt-0 </div> </div> <div class="color-bg-closed-emphasis"> <div class="inner color-bg-danger mr-0"> mr-0 </div> </div> <div class="color-bg-closed-emphasis"> <div class="inner color-bg-danger mb-0"> mb-0 </div> </div> <div class="color-bg-closed-emphasis"> <div class="inner color-bg-danger ml-0"> ml-0 </div> </div> </div> </body> </html> |
Output:
Example 2: The below example shows how to use mx-0 and my-0 classes to reset the margin in the horizontal and vertical directions respectively.
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>Reset Margins - Primer CSS</title> <link href= rel="stylesheet" /> <style> /* Margin to provide spacing between the div elements */ .d-flex > div { margin-top: 20px; } /* The inner div elements will have the default margin of 20px */ /* This will be overridden by the reset margin classes */ .inner { margin: 20px; } </style> </head> <body> <div class="text-center"> <h2 class="color-fg-success"> GeeksforGeeks </h2> <h4>Primer CSS - Reset Margins</h4> </div> <div class="d-flex flex-justify-around flex-items-center flex-column"> <div class="color-bg-closed-emphasis"> <!-- The "mx-0" class will set the margins in the horizontal direction to zero --> <div class="inner color-bg-danger mx-0"> mx-0 </div> </div> <div class="color-bg-closed-emphasis"> <!-- The "my-0" class will set the margins in the vertical direction to zero --> <div class="inner color-bg-danger my-0"> my-0 </div> </div> </div> </body> </html> |
Output:
Reference: https://primer.style/css/utilities/margin#reset-margins
Please Login to comment...