Welcome Guest! (App Version 3.1)

websitnero logo name

HTML Margin


  • Margin provides a gap between 2 HTML Elements so that their borders do not collide with each other.
  • Margin helps in providing space between HTML Elements and help in aligning them properly at safe distance form each other so that UI doesn't look ugly.

Adding margin to an HTML Element

Margin of an element is added to avoid collision of 2 elements from each other. Margin adds a certain gap between 2 elements and they are taken a distance apart.

If there is no margin or margin is set to 0 px, then the 2 elements will seem to touch each other and UI will look bad.


    .p1{border:2px solid black;  margin-left:10px;}
    .p2{border:2px solid black;  margin-left:60px;}

  <p class="p1">This is paragraph 1.</p>
  <p class="p2">This is pargraph 2.</p>


This is paragraph 1.

This is pargraph 2.

Further Reading

1. Margin

WebsiteNero is highly optimized for learning various website developing technlogies. We try our best to add maximum modules and examples to help learn the concepts clearly and vividly. We try to present all content and examples as simple as we can removing any complexity to hurdle easy understanding. We try best provide you with worthful content, but we cannot guarantee full correctness of all the content on this site. While using this website, you agree to have read and accepted all our terms of use and conditions, cookie, and privacy policy. Copyright, 2013-2018 by websitenero.com. All Rights Reserved.