• USA : +1 973 910 5725
  • INDIA: +91 905 291 3388
  • info@tekslate.com
  • Login

CSS Margins & Paddings

CSS Outlines

Outlines are very similar to the borders by there are few major differences in borders and outlines:

An outline does not take up space.

Outline do not have to be rectangular.

Out line is always the same on all sides; you cannot specify different values for different side of the element.

Note

The outline properties are not supported by IE 6 or Netscape 7.

You can set the following outline properties using CSS.

The outline –width property is used to set the width of the outline.

The outline –style property is used to set the line style for the

The outline –color width property is used to set the color of the outline.

The outline property is used to set all the above three properties in a single statement.

 

CSS Margin

The margin property defines the space around an HTML element .It is possible to use negative values to overlap content.

The values of the margin property are not inherited by child elements. Remember that the adjacent vertical margins (top and bottom margins) will collapse into each other so that the distance between the blocks is not the sum of the margins, but only greater of the two margins or the same size as one margin if both are equal.

There are following four properties to set an element margin.

The margin A short hand property for setting the margin properties in one declaration.

The margin –bottom Specifies the bottom margin of an element.

The margin –top specifies the top margin of an element.

The margin –left specifies the left top margin of an element.

The margin –right specifies the right margin of an element.

Now we will see how to use these properties with examples.

 

CSS Margin Property

The margin property allows you set all of the properties for the four margins in one declaration .Here is the syntax to set margin around a paragraph.

<style type=”tesxt/css”>

p{margin :15px}

all four margins will be 15px

p{ margin :10px 2%}

top and bottom margin will be 10 px, left and right margin will be 2% of the total width of the document.

p{ margin :10px 2% -10px}

top and bottom margin will be 10 px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px.

p{ margin :10px 2% -10px auto}

top and bottom margin will be 10 px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser

</style>

Here is the example:

<p style=”margin: 15px; border:1px solid black;”>

top and bottom margin will be  10 px, left and right margin will be 2% of the total width of the document.

</p>

<p style=”margin:10 px 2% -10px ; border:1px  solid black”;> top margin will be 10px,left and right margin will be 2% of the total width of the document , bottom margin will be -10px</p>

<p style=”margin:10 px 2% -10px ;  auto;border:1px  solid black”;> top margin will be 10px,left and right margin will be 2% of the total width of the document , bottom margin will be -10px ,left margin will be set by the browser</p>

The margin –bottom Property:

The margin- bottom property allows you set bottom margin of an element .It can have a value in length,% or auto.

here is the example:

<p style=”margin –bottom: 15px; border:1px sild black;”>

This is  a paragrapgh with a specified bottom margin.

</p>

<p style =”margin –bottom: 5%; border:1px soild black;”>

This is another paragraph with a specified bottom margin in percent</p>

 

CSS Margin Top Property

Then margin-top property allows you set top margin of an element .It can have a value in length,%or auto

Here is the example:

<p style =”margin –top: 15px; border:1px solid black;”>

This is a paragraph with a specified top margin

</p>

<p style =”margin -top: 5%; border:1px solid black;”>

This is a paragraph with a specified top margin in percent

</p>

 

CSS margin –left property

The margin –  left property allows  you set left margin of an element .It can have a value in length% or auto.

Here is the example

<p style =”margin –left: 15px; border:1px solid black;”>

This is a paragraph with a specified left margin

</p>

<p style =”margin- left: 5%; border:1px solid black;”>

This is a paragraph with a specified left margin in percent

</p>

CSS margin –right property

The margin – right property allows  you set right margin of an element .It can have a value in length% or auto.

Here is the example:

<p style =”margin –right: 15px; border:1px solid black;”>

This is a paragraph with a specified right margin

</p>

<p style =”margin- right: 5%; border:1px solid black;”>

This is a paragraph with a specified left margin in percent

</p>

 

Margin – shorthand property

To shorten the code, it is possible to specify all the margin properties in one property. This is called a short hand property.

The short hand property for all the margin properties is margin””

 

Example

margin:100px 50px;

The margin property can have from one to four values

  • margin:25px 50 px 75 px 100px;
  • top margin is 25px
  • right margin is 50 px
  • bottom margin is 75 px
  • left margin is 100px
  • margin :25px 50 px 75 px;
  • top margin is 25px
  • right and left margins are 50 px
  • bottom margin is 75px
  • margin: 25px 50 px;
  • top and bottom margins are 25px
  • right and left margins are 50 px
  • margin : 25px;
  • all four margins are 25px

 

CSS- Padding’s

The padding property allows you to specify how much space should appear between the content of an element and its border:

There are following five CSS properties which can be used to control lists:

The value of this attribute should be either a length, a percentage, or the word inherits. If the value is inherit it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

You can also set different values for the padding on each side of the box using the following properties:

The padding –bottom Specifies the bottom padding of an element.

The padding –top specifies the top padding of an element.

The padding –left specifies the left padding of an element.

The padding –right specifies the right padding of an element.

The padding Serves as short hand for the preceding properties.

Now we will see how to use these properties with examples.

The padding- bottom Property

The padding –bottom property sets the bottom padding (space) of an element .This can take a value in terms of length of%.

Here is the example

<p style =”padding-bottom: 15px; border: 1px solid black;”>

This is a paragraph with specified bottom padding

</p>

<p style =”padding-bottom: 5%; border: 1px solid black;”>

This is another paragraph with specified bottom padding in percent

</p>

The padding –top  Property

The paddingtop property sets the top padding (space) of an element. This can take a value in terms of length of%.

Here is the example:

<p style =”padding-top: 15px; border: 1px solid black;”>

This is a paragraph with specified top padding

</p>

<p style =”padding-top: 5%; border: 1px solid black;”>

This is another paragraph with specified top padding in percent

</p>

The padding –left  Property

The paddingtop property sets the left padding (space) of an element. This can take a value in terms of length of%.

Here is the example:

<p style =”padding-left: 15px; border: 1px solid black;”>

This is a paragraph with specified left padding

</p>

<p style =”padding-left: 15%; border: 1px solid black;”>

This is another paragraph with specified left padding in percent

</p>

 

The padding –right Property:

The paddingtop property sets the right padding (space) of an element. This can take a value in terms of length of%.

Here is the example:

<p style =”padding-right: 15px; border: 1px solid black;”>

This is a paragraph with specified right padding

</p>

<p style =”padding-right: 5%; border: 1px solid black;”>

This is another paragraph with specified right top padding in percent

</p>

 

CSS Padding Property

The padding property sets the left, right, top and bottom  padding (space) of an element. This can take a value in terms of length of%.

Here is the example:

<p style =”padding: 15px; border: 1px solid black;”>

all four padding will be 15px

</p>

<p style =”padding: 10px 2%; border: 1px solid black;”>

top and bottom padding will be 10px,left and right padding will be 2% of the total width of the document.

</p>

<p style =”padding: 10px 2% 10px; border: 1px solid black;”>

top and bottom padding will be 10px,left and right padding will be 2% of the total width of the document, bottom padding will be 10px.

</p>

<p style =”padding: 10px 2% 10px 10px; border: 1px solid black;”>

top and bottom padding will be 10px,left and right padding will be 2% of the total width of the document, bottom padding  and top padding will be 10px.

</p>

 

Summary
Review Date
Reviewed Item
CSS Margins & Paddings
Author Rating
5

“At TekSlate, we are trying to create high quality tutorials and articles, if you think any information is incorrect or want to add anything to the article, please feel free to get in touch with us at info@tekslate.com, we will update the article in 24 hours.”

0 Responses on CSS Margins & Paddings"

    Leave a Message

    Your email address will not be published. Required fields are marked *

    Site Disclaimer, Copyright © 2016 - All Rights Reserved.

    Support


    Please leave a message and we'll get back to you soon.

    I agree to be contacted via e-mail.