HTML | DOM Style marginRight Property Last Updated : 03 Jun, 2022 Comments Improve Suggest changes Like Article Like Report The Style marginRight property in HTML DOM is used to set or return the right margin of an element. Syntax: It returns the marginRight property.object.style.marginRightIt is used to set the marginRight property.object.style.marginRight = "length|percentage|auto|initial| inherit" Return Values: It returns a string value, which representing the right margin of an element. Property Values: length: It is used to specify the margin in fixed length units. The default value is 0. Example: html <!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display: flex; flex-direction: row; padding: 10px 1px; } .div1, .div2 { padding: 5px; border: 2px solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to a fixed value --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = '50px'; } </script> </body> </html> Output:Before clicking the button: After clicking the button: percentage: It is used to specify the amount of margin as a percentage relative to the width of the containing element. Example: html <!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display: flex; flex-direction: row; padding: 10px 1px; } .div1, .div2 { padding: 5px; border: 2px solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to a fixed value --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = '20%'; } </script> </body> </html> Output:Before clicking the button: After clicking the button: auto: If the value is set to 'auto', then the browser automatically calculates a suitable value for the margin size. Example: html <!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display: flex; flex-direction: row; padding: 10px 1px; } .div1, .div2 { margin-right: 50px; padding: 5px; border: 2px solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to auto --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'auto'; } </script> </body> </html> Output:Before clicking the button: After clicking the button: initial: It is used to set the property to its default value. Example: html <!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { display: flex; flex-direction: row; padding: 10px 1px; } .div1, .div2 { margin-right: 20px; padding: 5px; border: 2px solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to initial --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'initial'; } </script> </body> </html> Output:Before clicking the button: After clicking the button: inherit: It is used to inherit the value from its parent element. Example: html <!DOCTYPE html> <html> <head> <title> DOM Style marginRight Property </title> <style> .container { margin-right: 50px; display: flex; flex-direction: row; } .div1, .div2 { padding: 5px; border: 2px solid; } </style> </head> <body> <h1 style="color: green"> GeeksforGeeks </h1> <b>DOM Style marginRight Property</b> <div class="container"> <div class="div1">Block One</div> <div class="div2">Block Two</div> </div> <button onclick="setMargin()"> Change marginRight </button> <!-- Script to set marginRight to inherit --> <script> function setMargin() { elem = document.querySelector('.div1'); elem.style.marginRight = 'inherit'; } </script> </body> </html> Output:Before clicking the button: After clicking the button: Supported Browsers: Google Chrome 1 and aboveEdge 12 and aboveInternet Explorer 3 and aboveFirefox 1 and aboveOpera 3.5 and aboveSafari 1 and above Comment More infoAdvertise with us Next Article HTML | DOM Style marginBottom Property S sayantanm19 Follow Improve Article Tags : Web Technologies HTML HTML-DOM Similar Reads HTML | DOM Style margin Property The DOM Style margin Property is used to sets or returns the margin of an element.We can set the different size of margins for individual sides(top, right, bottom, left).Margin properties can have following values: Length in cm, px, pt, etc.Width % of the element.Margin calculated by the browser: au 2 min read HTML DOM Style marginTop Property The Style marginTop property in HTML DOM is used to set or return the top margin of an element. Syntax: It returns the marginTop property.object.style.marginTopIt is used to set the marginTop property.object.style.marginTop = "length|percentage|auto|initial| inherit" Return Values: It returns a stri 3 min read HTML | DOM Style marginLeft Property The DOM Style marginLeft property is used to set or get the left margin of an element. The margin is used to insert space around the border, unlike padding that is used to insert space within the border of an element. Syntax: To Set the marginLeft:object.style.marginLeft='%|length|auto|initial|inher 2 min read HTML DOM | Style paddingRight Property The Style paddingRight property is used for setting or returning the right padding of an element. The padding property inserts the user desired space within the border of an element. Syntax : To get the property:object.style.paddingRightTo set the property:object.style.paddingRight = "%|length|initi 2 min read HTML | DOM Style marginBottom Property The Style marginBottom property in HTML DOM is used to set or return the bottom margin of an element. Syntax: It returns the bottom margin of element.object.style.marginBottomIt is used to set the bottom margin of an element.object.style.marginBottom = "length|percentage|auto|initial| inherit" Retur 3 min read HTML | DOM Style padding Property The Style padding property is used for setting or returning the padding of an element. The Style padding property can be used in 4 different ways : div {padding: 30px} -In this case, all the four sides have a padding of 30px.div {padding: 100px 50px} -In this case, the top and bottom padding will be 4 min read Like