Why does a child div with a fixed width, let the margin expand to the borders of the parent

Fluous 0
Viewed 51

Remark

I am absolutely sure that these questions have been asked before, but I just cannot seem to find it. Whether I am searching with the wrong keywords or just not understanding what is going on I do not know. Honestly, I am quite embarrassed to even be asking this question since it seems absolutely trivial. It has been quite some time that I worked with CSS, so I am quite sure that this is something really basic.

Questions

  1. Why does a child div that is smaller (e.g. with a fixed with) have a right margin that extends up until the border of the parent element?
  2. Why am I not able to restrict said margin with specifying right-margin?
  3. What is the best way to resolve this?

Example

<div>
  <div style="height: 50px; width: 50px; background-color: black" />
</div>

As you can see in the inspector, the most nested div actually has a margin that extends all the way to the parents border.

Inspector

Setting the right-margin does not affect this.

Any help would be deeply appreciated, please do feel free to redirect me to other questions if this has already been asked!

css html
3 Answers

This is because by default div is a block(display: block) which as you probably already know forces a container to take 100% width

For its child to be position at the start it needs right margin which in this case is calc(100% - 50px), this pushes element to left to place it at the same offsetX as its parent.

You cannot restrict it unless you change display: block of parent to flex, grid or whatever it is, because this is not your thing.

Well theoritically you can restrict it but you have to add margin-left to child instead of trying to restrict margin-right.

user1LPw0

just add display:inline-block on style code.

<div>
 <div style="height: 50px; width: 50px; background-color: black; display: inline-block" />
</div>
Scario Eva0

Looks like the browser's own space. You can try reset css.

Example:

    html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}
Alper Uluses0
Related