A margin is space between the content of an element its borders. You may assign margins to the top, the right, the bottom or the left of your page. Webtv only reads left margins. This course uses a left margin of 4em.
Margin properties have the word "margin", a hypen, then a side (top, right, bottom, left), so there are four (4) margin properties
margin-top: value
margin-right: value
margin-bottom: value
margin-left: value
value may be a percentage or a length
length may be expressed in px (pixels), pt (points) or em (ems)
values may be positive (inside the page) or negative (outside of the page)
WebTV (MSNTV) can only read margin-left!
margin-left: 5%;
margin-left: 15px;
margin-left: 20 pt;
margin-left: 3em;
/* left margin */
.ml { margin-left: 4em; }
Margins work well as class a applied to the body element, a div or a paragraph.
Margin class examples using.ml { margin-left: 4em; })
<body class="ml">
<div class="ml">
<p class="ml">
This dummy paragraph uses style="margin-left: 3em;". Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus nisl ut nunc. Curabitur et nisl. Fusce aliquam. Proin viverra porta leo. Suspendisse aliquet, odio in interdum accumsan, nisl turpis hendrerit nunc, ut consequat nulla elit vel diam. Vivamus risus.
This dummy paragraph uses style="margin-left: -2em;". WebTV throws it all the way to the left edge of the page rather than just putting it a bit into the normal left margin. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed rhoncus nisl ut nunc. Curabitur et nisl. Fusce aliquam. Proin viverra porta leo. Suspendisse aliquet, odio in interdum accumsan, nisl turpis hendrerit nunc, ut consequat nulla elit vel diam. Vivamus risus.
PC Screenshot (white page)
PC Screenshot (black page)
Use margin-left on a sample page. Post your page.
Simulating CSS Margins with WebTV (further reading)
Margin Propterty Shorthand Forms (advanced)
Happy coding!
Gnubee
