CODEWITHSUNDEEP
htmlcssreactjs
Patrick Gabriel
Patrick Gabriel

Reputation: 23

Where is the margin on the body of my example coming from?

body margin example

In the body of what i'm creating there seems to be a margin-right that takes up the entirety of the whitespace on the right hand side of the red rectangle, and i'm not entirely sure where it's coming from. In the image you can see that i've set the body's margin to 0, and in the inspector tool it doesn't seem to be showing any sort of number of pixels as the margin. Where is this coming from, and how would I be able to remove it?

If it helps, this is being made in react.

I'm a bit new to all of this, so apologize if this is a simple question or has been answered before! I couldn't find any answer that fits my particular situation.

Upvotes: 0

Views: 46

Answers (3)

TSB99X
TSB99X

Reputation: 3394

Empty horizontal space around HTML <body> is usual and intended behavior for any browser. In the end, what must be in place of nothing when user expands window, and thus, screen estate?

You can't remove it per se with fixed width <body>.

In a typical usecase, you want to fix width and center first child in <body> (leaving <body> without fixed width to span full width of page). By applying margin: 0; width: 318px; on <div id="root-panel"> you will set horizontal margins to be automatic and make it centered.

Upvotes: 0

pakman198
pakman198

Reputation: 123

Your body has a width of 318px, the rest is empty space, not a margin. Dev tools will display empty space or margins as an orange box.

Upvotes: 2

Adrian Brand
Adrian Brand

Reputation: 21638

width: 318px;

So it is 318 pixels wide and the margin is the left over.

Upvotes: 2

Related Questions