How does auto property work in margin:0 auto in CSS ? Last Updated : 08 May, 2023 Comments Improve Suggest changes Like Article Like Report In this article, we will learn how auto property works in margin:0 auto in CSS. The margin property is used to set the margins for an element. The margin property has four values margin-top, margin-right, margin-bottom, and margin-left. Syntax: margin: top_margin right_margin bottom_margin left_margin; /* We can also use the shortened syntax of margin that takes only two parameters */ margin: top_and_bottom_margin left_and_right_margin; So in margin: 0 auto, the top/bottom margin is 0, and the left/right margin is auto, Where auto means that the left and right margins are automatically set by the browser based on the container, to make the element centered. The margin: 0 auto equivalent to: margin-top:0; margin-bottom:0; margin-left:auto; margin-right:auto; Example: In this example, we are using an above-explained approach HTML <!DOCTYPE html> <html lang="en"> <head> <style> .parent { background-color: yellow; /* It set top and bottom margin to 5% and, the left and right are automatically set by browser */ margin: 5% auto; } .h1 { color: rgb(5, 138, 5); font-size: 50px; } </style> </head> <body> <div class="parent"> <h1 class="h1">GeeksforGeeks</h1> </div> </body> </html> Output: Before setting the margin: After set margin: Comment More infoAdvertise with us Next Article How does auto property work in margin:0 auto in CSS ? N nikhilchhipa9 Follow Improve Article Tags : Web Technologies CSS CSS-Properties CSS-Questions Similar Reads CSS margin-inline-end Property The margin-inline-end property is used to define the logical inline end margin of an element. This property helps to place margin depending on the element's writing mode, directionality, and text orientation.Syntax: margin-inline-end: length | auto | initial | inherit | unset; Property values: lengt 2 min read CSS scroll-margin-inline-end property The scroll-margin-inline-end property is used to set all the scroll margins to the end of the inline dimension of a scroll element at once. The selection of the end side depends upon the writing mode. The end side is the right side for the horizontal-tb writing mode and bottom or top side for the ve 2 min read CSS scroll-margin-inline Property The scroll-margin-inline property is used to set all the scroll margins to the start and end of a scroll element at once. This property is shorthand for the scroll-margin-inline-start and scroll-margin-inline-end property. The selection of the start and end sides depends upon the writing mode. The s 2 min read CSS margin-bottom Property The CSS margin-bottom property is used to specify the amount of margin to be used on the bottom of an element. The margin can be set in terms of length or percentage. Syntax:margin-bottom: <length> | <percentage> | autoProperty values:Length: This value specifies the length of the margin 3 min read CSS margin-top Property The margin-top property in CSS is used to set the top margin of an element. It sets the margin area on the top of the element. The default value of the margin-top property is 0. Syntax:margin-top: length|auto|initial|inherit;Property values:length: It is used to specify the length of the margin with 4 min read Like