How to set the border, padding, and margin properties

Set the border, padding, and margin properties

In This article, we discuss How to set the border, padding, and margin properties in easy steps.

The border, padding, and margin properties:

Setting the border, padding and margin easily by assigning a value to the corresponding property, in the following style sheet rule…

How to set the border, padding, and margin properties

p  {

        border : 10px;

        padding :25px;

        margin :15px;

       background-color :yellow;

      border-style : solid;

      border-color : green;

   }

This style rule sets the border width to 10 pixels on all four sides. The padding is set to 25 pixels on all four sides, and the margin is set to 15 pixels on all four sides. The following HTML document and how the style rule affects its rendering.

<  !DOCTYPEhtml > <  htmlxmlns=”http://www.w3.org/1999/xhtml” > <  head > <  title > <  /title > <  linkhref=”default.css”rel=”stylesheet”/ > <  /head > <  body > 
          <  p > 

                  This is the paragraph text its shows the rendered webpage, this is the paragraph text its shows the rendered                   webpage, this is the paragraph text its shows the rendered webpage,this is the paragraph text its shows the                   rendered webpage, this is the paragraph text its shows the rendered webpage, this is the paragraph text its                    shows the rendered webpage

            <  /p > 
<  /body > 

<  /html > 

Note The large gap between the text and the border, which is the padding. The border is rather thick with its width setting of 10 pixels. Outside the border, there is white space all around the paragraph, which is the margin property setting of 10 pixels.

In addition to setting each of these properties to a value that controls all four sides, you can specify each side and the value. You can assign a different value to each side of the border, in the following style rule.