Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Setting Margins for Individual Sides using CSS
CSS allows us to control the space around individual sides of an element. The CSS margin property is a shorthand for the following properties: margin-top, margin-right, margin-bottom and margin-left.
Syntax
The syntax of CSS margin property is as follows −
Selector {
margin-top: /*value*/
margin-right: /*value*/
margin-bottom: /*value*/
margin-left: /*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
Let’s say we have set the following margins using the shorthand property −
margin: 25px 30px 50px 60px;
The above means −
25 pixels for the top margin
30 pixels for the right margin
50 pixels for the bottom margin
60 pixels for the left margin
We can set the margins for individual slides like this −
margin-top: 25px; margin-right: 30px; margin-bottom: 50px; margin-left: 60px;
The following examples illustrate CSS margin property −
Set margin auto
The margin is set that adjusts automatically by the web browser using the margin property with the value auto −
margin-left: auto;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-left: auto;
margin-bottom: 4em;
width: 30%;
padding: 0.6rem;
box-shadow: inset 0 0 3px turquoise;
outline: thin dotted;
text-align: center;
}
div + div {
margin-right: 30%;
box-shadow: inset 0 0 6px teal;
}
div + div + div {
margin-left: 45%;
margin-top: -190px;
box-shadow: inset 0 0 6px orange;
}
</style>
</head>
<body>
<div>
This is demo text
</div>
<div>One (different margins)</div>
<div>Two (different margins)</div>
</body>
</html>
Set margins for the div
Here, we have set margins for multiple containers on a web page −
margin-top: 7%; margin-left: 25%;
We have also set negative values −
margin-bottom: -3em;
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
div {
margin-top: 7%;
margin-left: 25%;
margin-bottom: -3em;
width: 40px;
height: 40px;
padding: 0.6rem;
box-shadow: inset 0 0 3px turquoise;
border-top-right-radius: 100px;
}
div + div {
margin-right: 30%;
border-top-right-radius: unset;
border-top-left-radius: 100px;
box-shadow: inset 0 0 6px teal;
}
div + div + div {
margin-left: 25%;
margin-top: -140px;
box-shadow: inset 0 0 6px orange;
border-bottom-right-radius: 100px;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>
170 Views
