CSS margin-right Property

The margin-right property controls the space outside an element’s right edge in the CSS box model, pushing neighboring content away horizontally and affecting how much empty area appears between that element and whatever follows it on the right. It is one side of the element’s outer spacing and works together with the other sides when you think about overall spacing — for example, the shorthand margin can set all sides at once, while the opposing side can be adjusted with margin-left. Because it sits outside the element’s border and padding, changing it changes the apparent separation between boxes without altering the element’s internal layout.

How margin-right affects layout depends on the element’s display and formatting context. On block-level boxes its right margin contributes to the total horizontal space the element consumes alongside its content width and any borders or padding, so it interacts with properties such as display and width when determining whether elements fit on the same line or wrap. In contexts with floated or positioned elements, the right margin can influence how nearby content flows or is offset; it therefore relates to how float and position change the normal document flow.

There are a few important behavioral details to keep in mind when using margin-right. Horizontal margins do not participate in the vertical margin collapsing rules, so right-side spacing behaves independently of the top/bottom collapse phenomenon you might see with other margins; for the vertical counterparts see properties such as margin-top. For internationalization and logical layout flows, the modern logical counterpart to this physical side property is margin-inline-end, which maps to the appropriate side in left-to-right or right-to-left contexts. Finally, because margins affect the distance between elements rather than their inner sizing, they are commonly used to create external spacing and alignment without altering an element’s internal box or its intrinsic dimensions.