CSS Properties; CSS Margin And CSS Opacity

CSS Margin

With the CSS Margin property, you can specify the space around elements. It is entirely transparent and does not usually have a background color. CSS margin clears the area around an element.

You can independently change the top, bottom, left, and right margins by using separate properties. You can also change all the properties at once simply by using the shorthand margin property. See the difference between Margin and Padding

CSS margin has specific properties, and they are explained below:

CSS Margin Properties

Property	Description
Margin.	This property is used to arrange all the properties into one declaration.
Margin-left	This property is used to arrange the left margin of the element.
Margin-right	This property is used to arrange the right margin of the element.
Margin-top	This property is used to arrange the top margin of the element.
Margin-bottom	This property is used to arrange the bottom margin of the element.

CSS Margin Values

Below are the possible values for the CSS margin property.

Value	Description
Auto	This value lets the browser calculate a margin for an element.
Length	This value is used to set a margin to pt, px, cm, etc and it has a default value of 0px.
Percentage	This value specifies a margin expressed in a percent of the containing element's width.
Inherit	This value is used to inherit a margin from its original element.

CSS margin Example

Did you know that you can set a different margin for different sides of an element? Observe the following example.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: orange;  
}  
p.ex {  
    margin-top: 50px;  
    margin-bottom: 50px;  
    margin-right: 100px;  
    margin-left: 100px;  
}  
</style>  
</head>  
<body>  
<p>This is a sentence that is not displayed with a specified margin. </p>  
<p class="ex">This is a sentence that is displayed with a specified margin.</p>  
</body>  
</html>

CSS Margin: Shorthand Property

The CSS shorthand property is simply used to shorten your writing code. It helps to specify all the margin properties in just one property.

There are four types used to specify the margin property and any one of them can be used.

Margin: 50px 100px 150px 200px;
Margin: 50px 100px 150px;
Margin: 50px 100px;
Margin 50px;

Margin: 50px 100px 150px 200px;

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: orange;  
}  
p.ex {  
    margin: 50px 100px 150px 200px;  
}  
</style>  
</head>  
<body>  
<p>This is a sentence not displayed with a specified margin. </p>  
<p class="ex">This is a sentence that is displayed with a specified margin.</p>  
</body>  
</html>

Margin: 50px 100px 150px;

This shows that the top margin value is 50px, the left and right margin values are 100px, and the bottom margin value is 150px.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: orange;  
}  
p.ex {  
    margin: 50px 100px 150px;  
}  
</style>  
</head>  
<body>  
<p>This is a sentence not displayed with a specified margin. </p>  
<p class="ex">This is a sentence that is displayed with a specified margin.</p>  
</body>  
</html>

Margin: 50px 100px;

This shows that that the top and bottom margin values are 50px, and the left and right margin values are 100px.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: orange;  
}  
p.ex {  
    margin: 50px 100px;  
}  
</style>  
</head>  
<body>  
<p>This is a sentence not displayed with a specified margin. </p>  
<p class="ex">This is a sentence that is displayed with a specified margin.</p>  
</body>  
</html>

Margin: 50px

This margin value shows that the top, the right, the bottom, and the left margin values are 50px.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
p {  
    background-color: orange;  
}  
p.ex {  
    margin: 50px;  
}  
</style>  
</head>  
<body>  
<p>This is a sentence not displayed with a specified margin. </p>  
<p class="ex">This is a sentence that is displayed with a specified margin.</p>  
</body>  
</html>

CSS Opacity

The CSS opacity is a CSS property used to specify the element's transparency. You can say in more simple terms that it specifies the clarity of the image. CSS Opacity is mostly applied to images in different dimensions and backgrounds. Check out how to properly set backgrounds with CSS

Opacity, however, can be defined as the degree to which light is permitted to travel through an object.

How To Apply CSS Opacity Setting

The opacity setting is a setting that is applied identically across the entire object. Also, the opacity value is described in terms of a digital value that is less than 1. The lower opacity value displays the higher opacity. You should note that opacity is not inherited.

CSS Opacity Example: With A Transparent Image\

Below is a basic CSS opacity example using a transparent image.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
img.trans {  
    opacity: 0.4;  
    filter: alpha(opacity=40); /* For IE8 and earlier */  
}  
</style>  
</head>  
<body>  
<p>Normal Image</p>  
<img src="bag.jpg" alt="normal bag">  
<p>Transparent Image</p>  
<img class="trans" src="bag.jpg" alt="transparent bag">  
</body>  
</html>