Introduction to CSS Margin Color

The following article provides an outline on CSS Margin Color. The margin property in HTML gives space around the

outermost element’s content of the box-like structure. Margin is creating space beyond the box model elements. So, we

cannot apply color to the margin. If our requirement still applies color around the elements, instead of margin you can use padding.

The padding property in html gives space around the innermost element’s content of the box-like structure.

The space around padding and margin is called a border.

The difference between the padding, margin, and border you can observe below:

• As we know common styles in all the pages we always preferred CSS over HTML.
• So, in the tutorial, all common properties are implemented in CSS only.
• As we discussed above it is not possible to apply different colors but you can vary margin from box model by settting the background color of the html page to different color and margin color by default in white color.

CSS margin Property

Definition and Usage:

The margin property sets the margins for an element, and is a shorthand property for the following properties:

• margin-top
• margin-right
• margin-bottom
• margin-left

If the margin property has four values:

• margin: 10px 5px 15px 20px;
• top margin is 10px
• right margin is 5px
• bottom margin is 15px
• left margin is 20px

If the margin Property has three values:

• margin: 10px 5px 15px;
• top margin is 10px
• right and left margins are 5px
• bottom margin in 15px

If the margin property has two values:

• margin: 10px 5px;
• top and bottom margins are 10px
• right and left margins are 5px

If the margin property has one value:

• margin: 10px;
• all four margins are 10px

Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on horizontal (left and right) margins! Only vertical (top and bottom) margins!

Look at the following example:

Example

p.a {
  margin: 30px 0;
}

p.b {
  margin: 20px 0;
}

In the example above, the <p class=”a”> element has a top and bottom margin of 30px. The <p class=”b”> element has a top and bottom margin of 20px.

This means that the vertical margin between <p class=”a”> and <p class=”b”> should be 50px(30px + 20px).

But due to margin collapse, the actual margin ends up being 30px!

More Examples

Example

Set a color for the border with a HEX value:

div {border-color: #92a8d1;}

Example

Set a color for the border with an RGB value:

div {border-color: rgb(201,76,76);}

Example

Set a color for the border with an RGBA value:

div {border-color: rgba(201, 76, 76, 0.3);}

Example

Set a color for the border with a HSL value:

div {border -color: hsl(89, 43%, 51%);}

Example

Set a color for the border with a HSLA value:

div {border-color: hsla(89,43%, 51%, 0.3);}

Example

Set a different border-color for each side of an element:

div.ex1 {border-color: #00000ff;}
div.ex2 {border-color: #ff0000 #0000ff;}
div.ex3 {border-color: #ff0000 #00ff0ff0000 #0000ff;}
div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}

CSS Border Color

The space around pading and margin is called The Color between padding and margin is called as Border color. Border

color is used when we want to separate the HTML body from one content to another content. Border color is applied in all

sides at a time of different sides a time by using border-color The difference between padding, margin and border color

you can observer below As we know common styles in all the pages, we always preferred CSS over.

CSS border-color Property

Example

Set a color for the border:

div {border-color: coral;}

Definition and Usage

The border-color Property sets the color of an element’s four borders. This property can have from one to four values.

If the border-color property has four values:

• border-color: red green blue;
• top border is red
• right border is green
• bottom border is blue
• left border is pink

If the border-color property has three values:

• border-color: red green blue;
• top border is red
• right and left borders are green
• bottom border is blue

If the border-color property has two values:

• border-color: red green;
• top and bottom borders are red
• right and left borders are green

If the border-color property has one value:

• border-color:red;
• all four borders are red

Note: Always declare the border-style property before the border-color property. An element must have borders before you can change the color.

More Examples

Example

Set a color for the border with a HEX Value:

div {border-color: #92a8dq;}

Example

Set a color for the border with an RGB value:

div {border-color: rgb(201, 76, 76);}

Example

Set a color for the border with an RGBA value:

div {border-color: rgba(201, 76, 76, 0.3);}

Example

Set a color for the border with a HSL value:

div {border-color: hsl(89, 43%, 51%);}

Example

Set a color for the border with a HSLA value:

div {border-color: hsla(89, 43%, 51%, 0.3);}

Example

Set a different border-color for each side of an element:

div.ex1 {border-color: #0000ff;}
div.ex2 {border-color: #ffoooo #0000ff;}
div.ex3 {border-color: #ff0000 #00ff00 #0000ff;}
div.ex4 {border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255);}