Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Setting Margin Space around elements using CSS
The CSS margin property is used to set the margin area around the selected element around its borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.
Let?s say we have set the following margins using the shorthand property −
margin: 10px 45px 35px 70px;
The above means −
10 pixels for the top margin
45 pixels for the right margin
35 pixels for the bottom margin
70 pixels for the left margin
Syntax
The syntax of CSS margin property is as follows −
Selector {
margin: /*value*/
}
The value can be the following −
length − Set a a margin in px, pt, etc. The default is 0
% − Set a margin in percent
auto − The web browser calculates a margin automatically
The following examples illustrate CSS margin property −
Margins set with the px length
The margins can be set with the px length. The 10 pexelsis set for top and bottom and 15 pixels for right and left −
body * {
display: flex;
float: left;
margin: 10px 15px;
border: thin solid;
text-align: center;
width: 40%;
border-radius: 5%;
box-shadow: 0 0 4px 1px grey;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
body * {
display: flex;
float: left;
margin: 10px 15px;
border: thin solid;
text-align: center;
width: 40%;
border-radius: 5%;
box-shadow: 0 0 4px 1px grey;
}
p {
font-family: "Sim Sun", monospace;
background-color: lightcyan;
}
div {
font-family: Impact, cursive;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>First demo text</p>
<div>A demo line goes like this..</div>
</body>
</html>
Margins set with percentage length
The margins can be set with the percentage of the containing element −
table, table * {
margin: 5% 30%;
border: 12px double red;
padding: 0.5rem;
border-radius: 30px;
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
table, table * {
margin: 5% 30%;
border: 12px double red;
padding: 0.5rem;
border-radius: 30px;
}
td:nth-child(even) {
background-color: lightblue;
}
td:nth-child(odd) {
background-color: lightgreen;
}
</style>
</head>
<body>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Collapse Margins
On a web page, the top and bottom margins can be collapsed into a single margin. The largest of the two margins get set here i.e., 50px because of the collapse −
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border: 1px solid blue;
margin: 50px 0;
}
p.two {
border: 1px solid green;
margin: 45px 0;
}
</style>
</head>
<body>
<h1>Demo Heading</h1>
<p class="one">Top and bottom margin is 50px</p>
<p class="two">Top and bottom margin is 45px</p>
</body>
</html>
75 Views
