Skip to main content

How To Use Margin In CSS?

The CSS margin properties set the size of the white space outside the border. The margins are completely transparent and cannot have a background color.

CSS has properties for specifying the margin for each side of an element:
§  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 will be inherited from the parent element

It is also possible to use negative values for margins; to overlap content.

Example 1: The following example sets different margins for all four sides of a <p> element:
<!DOCTYPE html>
<html>
<head>
<style>

p { background-color: yellow; }

p.ex {
border:1px solid red;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual margin properties:</h2>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>

Example 2: The following example lets the left margin be inherited from the parent element:

<!DOCTYPE html>
<html>
<head>
<style>

div.container {
border: 1px solid red;
margin-left: 100px;
}

p.one { 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 class="container">
<p class="one">This is a paragraph with an inherited left margin (from the div element). </p>
</div>

</body>
</html>

Example 3: To shorten the code, it is possible to specify all the margin properties in one property.

<!DOCTYPE html>
<html>
<head>
<style>

p { background-color: yellow; }

p.ex {
border:1px solid red;
margin: 100px 150px 100px 80px;
}

</style>
</head>
<body>

<h2>Using the margin shorthand property:</h2>

<p>This is a paragraph with no specified margins.</p>
<p class="ex">This paragraph has a top and bottom margin of 100px, a left margin of 80px, and a right margin of 150px.</p>

</body>
</html>

Explanation: So, here is how it works:
If the margin property has four values:
§  margin: 25px 50px 75px 100px;
o   top margin is 25px
o   right margin is 50px
o   bottom margin is 75px
o   left margin is 100px

If the margin property has three values:
§  margin: 25px 50px 75px;
o   top margin is 25px
o   right and left margins are 50px
o   bottom margin is 75px

If the margin property has two values:
§  margin: 25px 50px;
o   top and bottom margins are 25px
o   right and left margins are 50px

If the margin property has one value:
§  margin: 25px;
o   All four margins are 25px

Example 4: 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 the auto Value</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 centered because it has margin: auto; </div>

</body>
</html> 
Labels:

Popular posts from this blog

Screenshots from Windows 1.01

Windows 1.0 is a graphical personal computer operating environment developed by Microsoft, released on November 20, 1985, as the first version of the Microsoft Windows line. Version 1.01 , also released in 1985, was the first point-release after Windows 1.00.   Screenshots from Windows 1.01: ⇰ Desktop  First Run Empty Desktop Desktop With Applications ⇰  Office Applications Notepad Text Editor Calculator Calendar Clock Address Book ⇰  Multimedia Applications Media player, CD player, Volume level, and Sound: This GUI doesn’t have these features. ⇰  Networking Applications Terminal Phone Dialer: This GUI doesn’t have this feature. ⇰  Internet Applications Browser, and Mail: This GUI doesn’t have these features. ⇰  Accessibility Applications Keyboard Map:  This GUI doesn’t have this feature. ⇰  Settings Desktop themes,  Display,  S...
Read more

C++ Program To Implement Casino Number Guessing Game.

#include <iostream> #include <string> #include <cstdlib> #include <ctime> using namespace std; void drawLine(int n, char symbol); void rules(); int main() { string playerName; int amount; int bettingAmount; int guess; int dice; char choice; srand(time(0)); drawLine(70,'_'); cout << "\n\n\n\t\tCASINO GAME\n\n\n\n"; drawLine(70,'_'); cout << "\n\nEnter Your Name : "; getline(cin, playerName); cout << "\n\nEnter Deposit Amount To Play Game : $"; cin >> amount;
Read more

The C Programming Language, 2nd Edition*

This book is meant to help the reader learn how to program in C. It is the definitive reference guide, now in a second edition. Although the first edition was written in 1978, it continues to be a worldwide best-seller. This second edition brings the classic original up to date to include the ANSI standard. For evolution of the planet earth and our modern understanding of biology, there was Darwin's Origin of the Species. For mathematics, there was Newton's Philosophiæ Naturalis Principia Mathematica. Well, for the internet, for Facebook, for LinkedIn, Twitter, Instgram, Snapchat, WhatsApp, Pornhub and even the odious website for Justin Bieber would never have existed without Kernigan and Ritchie (more affectionately known as K&R)'s classic, The C Programming Language. What language was TCP/IP written in? C. What language inspired both C++ and Java (and the abominable C#)? C. What language are most libraries on most operating systems written in if not assembler? C. ...
Read more

Java Tutorial For Beginners: Part 2.

Problem: Java Program To Solve Tower Of Hanoi Problem Using Stacks import java.util.*; public class TowerOfHanoiUsingStacks { public static int N; @SuppressWarnings("unchecked") public static Stack<Integer>[] tower = new Stack[4]; public static void main(String[] args) { Scanner scan = new Scanner(System.in); tower[1] = new Stack<Integer>(); tower[2] = new Stack<Integer>(); tower[3] = new Stack<Integer>(); System.out.print("Enter The Number Of Disks: "); int num = scan.nextInt(); N = num; toh(num); scan.close(); } /* Function to push disks into stack */ public static void toh(int n) { for (int d = n; d > 0; d--) tower[1].push(d); display(); move(n, 1, 2, 3); }
Read more

How Are The Web Pages Written?

Web pages are written in HTML, the web programming language that tells web browsers how to structure and present content on a web page. In other words, HTML provides the basic building blocks for the web. And for a long time, those building blocks were pretty simple and static: lines of text, links, and images. Today, we expect to be able to do things like play online chess or seamlessly scroll around a map of our neighborhood, without waiting for the entire page to reload for every chess move or every map scroll. The idea of such dynamic web pages began with the invention of the scripting language JavaScript. JavaScript support in major web browsers meant that web pages could incorporate more meaningful real-time interactions. For example, if you have filled out an online form and hit the “submit” button, the web page can use JavaScript to check your entries in real-time and alert you almost instantly if you had filled out the form incorrectly. But the dynamic web as we ...
Read more