CSS TUTORIALS - CSS - Margins
CSS - Margins
|
<style type="text/css"> p {margin: 15px} all four margins will be 15px p {margin: 10px 2%} top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. p {margin: 10px 2% -10px} 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 {margin: 10px 2% -10px auto} top margin will be 10px, 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> |
|
<p style="margin: 15px; border:1px solid black;"> all four margins will be 15px </p> <p style="margin:10px 2%; border:1px solid black;"> top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p> <p style="margin: 10px 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: 10px 2% -10px auto; border:1px solid black;"> top margin will be 10px, 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> |
|
all four margins will be 10px top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px top margin will be 10px, 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 style="margin-bottom: 15px; border:1px solid black;"> This is a paragraph with a specified bottom margin </p> <p style="margin-bottom: 5%; border:1px solid black;"> This is another paragraph with a specified bottom margin in percent </p> |
|
This is a paragraph with a specified bottom margin This is another paragraph with a specified bottom margin in percent |
|
<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 another paragraph with a specified top margin in percent </p> |
|
This is a paragraph with a specified top margin This is another paragraph with a specified top margin in percent |
|
<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 another paragraph with a specified top margin in percent </p> |
|
This is a paragraph with a specified left margin This is another paragraph with a specified top margin in percent |
|
<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 another paragraph with a specified right margin in percent </p> |
|
This is a paragraph with a specified right margin This is another paragraph with a specified right margin in percent |