Supported Browser

  • Google
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari


CSS Margins

CSS Margins are the invisible spaces that surround an element, separating it from its neighbours and the viewport (the visible area of the web page). In web design, margins play an important role in defining the spacing around an element. Here, we’ll learn about the essential concepts of CSS margins. Understanding these properties is crucial for creating well-designed web layouts. We’ll cover their definitions, usage, best practices, and examples.

Similar Reads

What is Margin?

Margins, as defined by the CSS margin property, create spaces around an element, setting it apart from neighbouring elements. You can individually set margins for each side: top, right, bottom, and left. The margin values can be specified in various units (e.g., pixels, rems, ems, percentages) or even as auto (calculated by the browser). Surprisingly, margins also allow negative values....

Margin Values

Pixels (px): The most common unit, specifying a fixed number of pixels.Percentage (%): The margin is calculated as a percentage of the containing element’s width (for horizontal margins) or height (for vertical margins).Other units: Less common units like em, rem, vh, and vw can also be used for relative sizing.Auto: The browser calculates a suitable margin size, often used for centering elements....

Margin Properties

margin-top: Sets the top margin of an element.margin-right: Sets the right margin of an element.margin-bottom: Specifies the margin at the bottom of an element.margin-left: Determines the width of the margin on the left side of an element....

Supported Browser

Google Microsoft Edge Firefox Opera Safari...