HTML - DOM Style Object marginBottom Property

Quiz

HTML DOM Style Object marginBottom property sets or returns the bottom margin of an element.

Syntax

Set the marginBottom property:

object.style.marginBottom= "percent | length | auto | initial | inherit";

Get the marginBottom property:

object.style.marginBottom;

Property Values

Value	Description
percent	It specifies bottom margin in percentage of the width of the parent element.
length	It specifies bottom margin in length units, It's default value is 0.
auto	It lets browser to set bottom margin value.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents bottom margin of an element.

Examples of HTML DOM Style Object 'marginBottom' Property

The following examples sets and gets the bottom margin of div element.

Set the Bottom Margin

The following example sets the bottom margin using length value and percentage.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object marginBottom Property
    </title>
    <style>
        div {
            border: 2px solid #04af2f;
        }
        #margin {
            border: 1px solid black;
            margin: 15px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set bottom margin.
    </h3>
    <button onclick="fun()">Set Margin</button>
    <button onclick="funTwo()">
        Set Margin in Percentage
    </button>
    <br>
    <br>
    <div>
        <div id="margin">
            <p>Welcome to Tutorials Point.</p>
        </div>
    </div>
    <script>
        function fun() {
            document.getElementById("margin")
                .style.marginBottom = "40px";
        }
        function funTwo() {
            document.getElementById("margin")
                .style.marginBottom = "10%";
        }
    </script>
</body>
</html>

Get the Bottom Margin Value

The following example gets the bottom margin value applied on div element.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object marginBottom Property
    </title>
    <style>
        div {
            border: 2px solid #04af2f;
        }
        #margin {
            border: 1px solid black;
            margin: 15px;
        }
    </style>
</head>
<body>
    <h3>
        Click to set bottom margin.
    </h3>
    <button onclick="fun()">Get Margin</button>
    <button onclick="funTwo()">
        Get Margin in Percentage
    </button>
    <br>
    <br>
    <p id="result"></p>
    <br><br>
    <div>
        <div id="margin">
            <p>Welcome to Tutorials Point.</p>
        </div>
    </div>
    <script>
        function fun() {
            let x=document.getElementById("margin")
                .style.marginBottom = "40px";
            document.getElementById("result")
                .innerHTML="Bottom Margin: " +x;
        }
        function funTwo() {
            let x =document.getElementById("margin")
                .style.marginBottom = "10%";
            document.getElementById("result")
                .innerHTML="Bottom Margin: " +x;
        }
    </script>
</body>
</html>

Supported Browsers

Property
marginBottom	Yes 1	Yes 12	Yes 1	Yes 1	Yes 3.5

html_dom.htm

Print Page