CSS - Margins


 CSS - Margins

  • In CSS, the Margin property defines the space around some HTML elements.
  • In CSS, margin property sets the white spaces around the border.
  • It has four types of property they are,
    • margin-top.
    • margin- bottom. 
    • margin-left.
    • margin-right.

Margin-Top :

  • The margin-top property in CSS is used to set top margin of an element.

Margin Bottom :

  • The margin-bottom property allows to set bottom margin of an element.

Margin Left :

  • The margin-left property allows us to set left margin of an element. It can have a value in length, % or auto.

Margin Right :

  • The margin-right property allows you set right margin of an element. 

Sample Code :

<html>
   <head>
   </head>
   <body>
      <p style="margin: 100px; border:1px solid black;"> 
       		Welcome To Wikitechy! 
      </p> 
      <p style="margin-top:100px; border:1px solid red;">
       		Best E-Learning Website in The World! 
      </p>
      <p style="margin-left: 200px; border:1px solid black;">
       		You Can Learn All the Technologies Easily. 
      </p> 
      <p style="margin-right: 50px; border:1px solid black;">
      		Find Solutions for All the Technological Errors. 
      </p>
  </body>
</html>

Code Explanation :


    Applying margin: 100px for <p> tag will display the paragraph content with 100 pixels away from all the margins. 

    In CSS, margin-top: 100px will display the selector 100px away from the top margin.

    Border:1px solid red property allows us to create a border around paragraph selector and will appear in red color and style of the border will be in solid.

    Similarly, applying margin-left :200px property for <p> tag will display all the content away from the left margin.

    In CSS, Margin-right :50px will display all the content from the right margin.

Sample Output :

Here we have shown the overall output for the CSS-Margin with different variations as below with its explanation. 


    Here we have shown the margin: 100px for paragraph <p> tag which is displaying the paragraph content with 100 pixels away from all the margins whose border style is solid black of 1px.

    Similarly, we have shown the margin-top: 100px for paragraph <p> tag which is displaying the paragraph contents with 100 pixels away from the first paragraph “Welcome to Wikitechy!” alone whose border style is solid red of 1px.

    In CSS, margin-left :200px properties for <p> tag will display all the content 200 pixels away from the left margin whose border style is solid black of 1px.

    The margin-right:50px property allows us to set right margin of a paragraph element whose border style is solid black of 1px.