margins in css

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.
With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
All the margin properties can have the following values:
  • auto - the browser calculates the margin
  • length - specifies a margin in px, pt, cm, etc.
  • % - specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element
Tip: Negative values are allowed.


<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>
Output:

Using individual margin properties

This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.

 margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px


<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

 <h2>The margin shorthand property - 4 values</h2>

 <div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

 <hr>

 </body>
</html>

 Output:

The margin shorthand property - 4 values

This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.
If the margin property has three values:
  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px
<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

Output:

The margin shorthand property - 3 values

This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.
If the margin property has two values:
  • margin: 25px 50px;
    • top and bottom margins are 25px
    • right and left margins are 50px

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>

Output:

The margin shorthand property - 2 values

This div element has a top and bottom margin of 25px, and a right and left margin of 50px.

If the margin property has one value:
  • margin: 25px;
    • all four margins are 25px
<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>

Output:

The margin shorthand property - 1 value

This div element has a top, bottom, left, and right margin of 25px.

The auto Value

You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width:300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin:auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

Output:

Use of margin:auto

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
This div will be horizontally centered because it has margin: auto;

The inherit Value

This example lets the left margin of the <p class="ex1"> element be inherited from the parent element (<div>):


<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

Output:

Use of the inherit value

Let the left margin be inherited from the parent element:
This paragraph has an inherited left margin (from the div element).


Margin Collapse:

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.
This does not happen on left and right margins! Only top and bottom margins!

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  margin: 0 0 50px 0;
}

h2 {
  margin: 20px 0 0 0;
}
</style>
</head>
<body>

<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>

</body>
</html>

Output:

In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. Then, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being 50px.

Heading 1

Heading 2


Comments

Post a Comment

Popular posts from this blog

css3 Borders

The CSS  border  properties allow you to specify the style, width, and color of an element's border. Different Border Styles: The  border-style  property specifies what kind of border to display. The following values are allowed: dotted  - Defines a dotted border dashed  - Defines a dashed border solid  - Defines a solid border double  - Defines a double border groove  - Defines a 3D grooved border. The effect depends on the border-color value ridge  - Defines a 3D ridged border. The effect depends on the border-color value inset  - Defines a 3D inset border. The effect depends on the border-color value outset  - Defines a 3D outset border. The effect depends on the border-color value none  - Defines no border hidden  - Defines a hidden border The  border-style  property can have from one to four values (for the top border, right border, bottom border, and the left border). <!DO...
Read more

Introduction to CSS

What is CSS? CSS  stands for  C ascading  S tyle  S heets CSS describes  how HTML elements are to be displayed on screen, paper, or in other media CSS  saves a lot of work . It can control the layout of multiple web pages all at once External stylesheets are stored in  CSS files. Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.  CSS Solved a Big Problem HTML was NEVER intended to contain tags for formatting a web page! HTML was created to  describe the content  of a web page, like: <h1>This is a heading</h1> <p>This is a paragraph.</p> When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a ...
Read more

Background repeat and no-repeat in css

Background repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("gradient_bg.png");   background-repeat: repeat-x; // we can give repeat-y for aligning in y axis } </style> </head> <body> <h1>Hello World!</h1> <p>Here, a background image is repeated only horizontally!</p> </body> </html> No Repeat in css: <!DOCTYPE html> <html> <head> <style> body {   background-image: url("img_tree.png");   background-repeat: no-repeat; } </style> </head> <body> <h1>Hello World!</h1> <p>W3Schools background image example.</p> <p>The background image is only showing once, but it is disturbing the reader!</p> </body> </html>
Read more