CSS-Home CSS-Environment CSS-Basic syntax CSS-Selector CSS-How To Add CSS CSS-Comment CSS-Color CSS-Background CSS-Font CSS-Text CSS-Boarder CSS-Margin CSS-Padding CSS-Height/Width CSS-Link CSS-Table CSS-Visibility CSS-Scrollable CSS-Float/Clear CSS-Line CSS-Align CSS-Dimension CSS-Event CSS-Pusedo class CSS-Position CSS-Transparency CSS-Dropdown CSS-Form CSS-List/Counter CSS-Website layout CSS-Text effect CSS-Image effect CSS-Button effect CSS-page number CSS-Box CSS-@media CSS-Multi device CSS-Multi device 1 CSS-Multi device 2

CSS - Margins

The margin property defines the space around an HTML element.

There are properties for setting the margin for each side of an element (top, right, bottom, and left).

You can set following Borders properties −

  • margin-top :The margin-top specifies the top margin of an element.
  • margin-right : The margin-right specifies the right margin of an element.
  • margin-bottom : The margin-bottom specifies the bottom margin of an element.
  • margin-left : The margin-left specifies the left margin of an element.

  • All the margin properties can have the following values:

  • auto - the browser calculates the margin
  • length - specifies a margin in px, pt, cm, etc.
  • % - specifies a margin in % of the width of the containing element
  • inherit - specifies that the margin should be inherited from the parent element

  • Example : CSS - Margins

    <!DOCTYPE html>
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 100px;
    margin-right: 300px;
    margin-left: 80px;
    <p>Code Always.</p>
    <h3>code always to become best programmer.</h3>

    When the above code is compiled , it produces the following result.


    Code Always.

    Code Always To Become Best Programmer.

    You can set CSS margin properties inline, internal and external way of using CSS in your HTML page.