Hot To Test Margin Spaces on All 4 Sides

Q

Hot To Test Margin Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements

✍: FYIcenter.com

A

If you want test margin spaces on all 4 sides of a <P> tag you can use the following HTML and CSS document. It allows you to specify margin spaces with different values and validate them with legend boxes.

<html><head>
<style type="text/css">
  H1 {font-size: 20px}
  DIV.page {width: 475px; border: 1px solid black}
  TABLE#out {background-color: #ffdddd}
  TD#box {border: 1px solid black}
  P#box {width: 300px; height: 300px; 
    padding: 30px 10px 40px 20px; 
    border-style: solid dotted double dashed;
    border-width: 30px 10px 40px 20px;
    border-color: #ff0000 #00ff00 #0000ff #000000;
    margin: 30px 10px 40px 20px; 
    background-color: #ddddff}
  TD.legend#w30 {height: 30px; background-color: #ffffff}
  TD.legend#g30 {height: 30px; background-color: #dddddd}
  TD.legend#data {height: 160px; background-color: #ffffff}
  TD.legend#w40 {height: 40px; background-color: #ffffff}
  TD.legend#g40 {height: 40px; background-color: #dddddd}
</style>
</head><body><div class="page">
<H1>Content Box with Paddings, Borders and Margins</H1>
<table id=out><tr>
<td id=box><p id=box><script language="JavaScript">
  for (i=0; i<10; i++) {
    for (j=0; j<10; j++) {
      document.write(j+' ');
    }
  }
</script></p></td>
<td valign=top><table cellpadding=0 cellspacing=0>
<tr><td class=legend id=g30>- margin-top</td></tr>
<tr><td class=legend id=w30>- padding-top</td></tr>
<tr><td class=legend id=g30>- border-top</td></tr>
<tr><td class=legend id=data>- Content box</td></tr>
<tr><td class=legend id=g40>- padding-bottom</td></tr>
<tr><td class=legend id=w40>- border-bottom</td></tr>
<tr><td class=legend id=g40>- margin-bottom</td></tr>
</table></td>
</tr></table>
<p align="right">By FYICenter.com</p>
<div></body></html>

Save this document as marginBox.html, and view it with a browser, you will see that the element full size is increased because of margin spaces:

2007-05-11, 5068👍, 0💬

Hot To Test Borders with Different Widths, Styles, and Colors
Hot To Test Borders with Different Widths, Styles, and Colors? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want test borders on all 4 sides of a <P> tag with different widths, styles and colors, you can use the following HTML and CSS document. It allows... 2007-05-11, 5418👍, 0💬

How To Specify Is the Color of the Margin Area
How To Specify Is the Color of the Margin Area? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS doesn't allow you to specify the color of the margin area of a block element. The color of the margin area is transparent. It means that the background color or background... 2007-05-11, 5358👍, 0💬

What Are the Background Properties of a Block Element
What Are the Background Properties of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements The background of a block element can be formatted in different ways: Transparent to show the background of the parent element. Non-transparent background with a specif... 2007-05-11, 5193👍, 0💬

Hot To Specify the Padding Spaces of a Block Element
Hot To Specify the Padding Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 4 style properties to control padding spaces of a block element. You can specify them in different ways as shown in the following CSS examples: {padding-top: ... 2007-05-11, 5143👍, 0💬

Hot To Test Margin Spaces on All 4 Sides
Hot To Test Margin Spaces on All 4 Sides? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements If you want test margin spaces on all 4 sides of a <P> tag you can use the following HTML and CSS document. It allows you to specify margin spaces with different values and v... 2007-05-11, 5069👍, 0💬

How To Add Images to Backgrounds
How To Add Images to Backgrounds? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements One image can be specified to the background at a particular position. It can also be repeated in horizontal direction, vertical direction, or both directions with the following style prope... 2007-05-11, 4965👍, 0💬

How To Specify Margin Spaces of a Block Element
How To Specify Margin Spaces of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 4 style properties to control margin spaces of a block element. You can specify them in different ways as shown in the following CSS examples: {margin-top: 30px} -... 2007-05-11, 4789👍, 0💬

How To Specify Is the Color of the Padding Area
How To Specify Is the Color of the Padding Area? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS doesn't allow you to specify the color of the padding area of a block element. The padding area is part of the background of the block element. In another word, the paddi... 2007-05-11, 4781👍, 0💬

How To Specify Borders of a Block Element
How To Specify Borders of a Block Element? - CSS Tutorials - HTML Formatting Model: Block, Inline and Floating Elements CSS offers 12 style properties to control borders of a block element with 3 properties on each side to control border style, width and color. You can specify those 12 border proper... 2007-05-11, 4717👍, 0💬

All rights in the contents of this web site are reserved by the individual author. fyicenter.com does not guarantee the truthfulness, accuracy, or reliability of any contents.