< HTML Margins | Syntax | Left | Right | Center

Guidance portal

World of Guidance and Education

Insert Margins

Margins make your contents visually more appealing thus easier to read and understand. Webpages are designed with differnent lengths and widths in accordance with the designer's requirements of contents to be presented on the webpage. By inserting margins we can limit the length and width of the webpage. In this chapter we will learn to insert the margins on the webpages.

Margins:

As we know there are four major types of margins, namely;

  • Left Margin
  • Right Margin
  • Top Margin
  • Bottom Margin

Left Margin:

Left Margin is used to leave space from left. Read the syntax of left margin. You have noticed the tag used is <body>. The word "Leftmargin" is written inside the body tag and then size is defined as per requirement.

     <body leftmargin="your size">

Right Margin:

Right margin is used to leave space from right. See the syntax of right margin. As already mentioned under the heading left margin, the wored "rightmargin" is written inside the body tag and then size is defined as per requirement.

     <body rightmargin="your size">

Top Margin:

Top margin is used to leave space from top. See the syntax of top margin which has same concept as mentioned in above two margins.

     <body topmargin="your size">

Bottom Margin:

Bottom margin is used to leave space from the bottom of page. See the syntax of bottom margin.

     <body bottommargin="your size">

Lets combine all these margins togather on the web page and see how does it look like on the browser.

NOTE

You can define height and width of margins.code for margins height is marginheight="your size"and for width marginwidth="your size"

    Code

    <!DOCTYPE HTML>
    <html>
    <head>

    <title>OUR FIRST WEB PAGE</title>
    </head>

    <body leftmargin="100" rightmargin="100" topmargin="100" bottommargin="100">
    <p>There is the text of your paragraph or any type of <br>
    content.................................... </p>
    </body>
    </html>

Browser view

 

comments powered by Disqus