marginThe CSS margin shorthand property is used to create space around an element outside of any defined borders. It defines the outermost portion of the box model.
The margin property can be specified using lengths, percentages, and keywords such as auto. It can also accept negative values.
See the Pen
CSS Margin Example by Solomon Eseme (@kaperskyguru)
on CodePen.
div {
margin: <length> | <percentage> | auto
}
margin is a CSS shorthand property used to define up to four values for margin-top, margin-right, margin-left, and margin-bottom.
div {
margin: 2px 3px 4px 5px;
}
The equivalent margin can be defined as below.
div {
margin-top: 2px;
margin-right: 3px;
margin-left: 5px;
margin-bottom: 4px;
}
The margin proprety can accept one to four values.
When one value is supplied to the margin shorthand property, it applies the same margin value to all four sides.
div {
margin: 5px;
}
// SAME AS
div {
margin-top: 5px;
margin-right: 5px;
margin-bottom: 5px;
margin-left: 5px;
}
When two values are supplied to the margin property, the first value is applied to the top and bottom margins, while the other is applied to the left and right.
div {
margin: 5px 3px;
}
// SAME AS
div {
margin-top: 5px;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 5px;
}
When three values are supplied, the first value is applied to the top margin; the second value is applied to the left and right margins; and the third value is applied to the bottom margin.
div {
margin: 5px 3px 1px;
}
// SAME AS
div {
margin-top: 5px;
margin-right: 3px;
margin-left: 3px;
margin-bottom: 1px;
}
When four values are supplied, the values are applied in clockwise order. In other words: the first value is applied to the top margin; the second value is applied to the right margin; the third value is applied to the bottom; and the fourth value is applied to the left.
div {
margin: 5px 3px 1px 6px;
}
// SAME AS
div {
margin-top: 5px;
margin-right: 3px;
margin-left: 6px;
margin-bottom: 1px;
}
With the use of the auto keyword, it is very easy to center elements in the container using margin.
div {
margin: 2em auto; /* top and bottom: 2em margin */
/* Box is horizontally centered */
}
div {
margin: auto; /* top and bottom: 0 margin */
/* Box is horizontally centered */
}
When negative values are supplied to the margin, they pull the element in a particular direction rather than push it.
For example, the snippet below will pull the element towards the top by 5x, towards the right by 3x, towards the left by 6px, and towards the bottom by 1px.
Learn more →div {
margin: -5px -3px -1px -6px;
}
As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.
LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.
Modernize how you debug web and mobile apps — start monitoring for free.
Promotions don’t just happen. I had to stop waiting, start asking, and rethink what “senior” really means. Here’s how I finally moved forward.
The switch to Go may be a pragmatic move in the short term, but it risks alienating the very developers who built the tools that made TypeScript indispensable in the first place.
Discover the basics and advanced use cases of type casting, how and why to use it to fix type mismatches, and gain some clarity on casting vs. assertion.
JavaScript date handling can be tough. Here are some native Date API tools and specialized libraries to tackle them with.
