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.
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.
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.
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>
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>
The margin - left property allows you set left margin of an element .It can have a value in length% or auto.
<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>
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>
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””
margin:100px 50px; The margin property can have from one to four values
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 sets the bottom padding (space) of an element .This can take a value in terms of length of%.
<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 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 –top 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 –top 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>
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>
You liked the article?
Like: 0
Vote for difficulty
Current difficulty (Avg): Medium
TekSlate is the best online training provider in delivering world-class IT skills to individuals and corporates from all parts of the globe. We are proven experts in accumulating every need of an IT skills upgrade aspirant and have delivered excellent services. We aim to bring you all the essentials to learn and master new technologies in the market with our articles, blogs, and videos. Build your career success with us, enhancing most in-demand skills in the market.
