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
-
Economics & Finance
Selected Reading
Set the right margin of an element with CSS
The margin-right property in CSS is used to set the right margin of an element. It creates space on the right side of an element, pushing it away from adjacent elements or the container's edge.
Syntax
margin-right: value;
Values
The margin-right property accepts several types of values:
- Length units: px, em, rem, pt, cm, etc.
- Percentage: Relative to the width of the containing element
- auto: Browser calculates the margin automatically
- inherit: Inherits from parent element
Example with Different Values
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
border: 2px solid black;
padding: 10px;
}
.example1 {
margin-right: 50px;
border: 2px solid red;
background-color: lightblue;
}
.example2 {
margin-right: 20%;
border: 2px solid green;
background-color: lightcoral;
}
.example3 {
margin-right: auto;
border: 2px solid blue;
background-color: lightyellow;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<p class="example1">Right margin: 50px</p>
<p class="example2">Right margin: 20%</p>
<p class="example3">Right margin: auto</p>
</div>
</body>
</html>
Practical Use Cases
<!DOCTYPE html>
<html>
<head>
<style>
.button-group {
margin: 20px 0;
}
.btn {
padding: 10px 15px;
background-color: #007bff;
color: white;
border: none;
margin-right: 10px;
}
.btn:last-child {
margin-right: 0;
}
.sidebar {
width: 200px;
background-color: #f8f9fa;
padding: 15px;
margin-right: 30px;
float: left;
}
.main-content {
background-color: #e9ecef;
padding: 15px;
overflow: hidden;
}
</style>
</head>
<body>
<div class="button-group">
<button class="btn">Save</button>
<button class="btn">Cancel</button>
<button class="btn">Delete</button>
</div>
<div class="sidebar">
Sidebar content with right margin
</div>
<div class="main-content">
Main content area
</div>
</body>
</html>
Key Points
- Margin-right creates transparent space outside the element's border
- Percentage values are calculated based on the containing element's width
- Use
margin-right: autowith a fixed width to push elements left - Negative values are allowed and will pull the element to the right
Conclusion
The margin-right property is essential for controlling spacing and layout in CSS. Use pixel values for fixed spacing, percentages for responsive designs, and auto for automatic positioning.
Updated on: 2026-03-15T23:18:59+05:30
254 Views
Advertisements