Is This Empty Space Actually Margin-Right Which Is Not Recognized by Dev Tools

Is this empty space actually margin-right which is not recognized by dev tools?

As Temani's answer says, the essential difference is between the computed value of the right margin, which is 0px and the used value, which is 300px in your example.

What is confusing is what are the "computed" values depicted in the dev tools.

The Computed value of a property has a very particular meaning. When a child element inherits the value of a property, that Computed value becomes the child's Specified value of that same property. So, if the computed value for width of a block element is, say, 50% of its container, and its block child has width:inherit then that child will be 50% of 50% (= 25%) of the outer container, rather than inheriting the pixel value of the parent.

html {
  background-color:white;
}
* { padding-top: 10px; padding-bottom:10px; margin:0; }
body {
  width: 300px;
  background-color:lightyellow;
}
div {
  width: 50%;
  background-color:lightgreen;
}
p {
  width:inherit;
  background-color:lightblue;
  height:50px;
}

<div>
  <p>Hello World</p>
</div>

Unknown margin to the right

Problem

You move an element that has 100% width (default of a div) relative 5% from the left. This causes an overflow on the parent element.

Solution 1

You need to reduce the element width accordingly. width: calc(100% - 5%);

Solution 2

Move the div using a margin-left instead (depending on other margins in ancestor elements, this might not work):

#pfpbg {
    padding: 5px;
    width: 20%;
    max-width: 20%;
    height: auto;
    background-color: #1c1c1c;
    box-sizing: border-box;
    margin-left: 5%;
}

Google Chrome Dev Tools: Padding vs Margin

In box model, the width is calculated in two ways:

1. border-box (calculation includes border and padding)
2. content-box (calculation excludes border and padding, default)

If it's gonna be border-box, then the values of padding and border will be added twice with the width and height.

_{(source: binvisions.com)}

The margin is never included in the calculation of width. That's the reason.

Why is chrome highlighting a margin that is not listed in styles or computed

This is caused by the display: block rule.

The element is occupying the entire horizontal space of its parent, so Chrome tries to convey that by coloring the occupied space with the margin color.

Change the rule to either display: inline-block or display: inline to remedy the issue.

CSS: Margin not present in the inspector but present on the page

This seems to be the Chrome Dev Tools' way of saying: the display:block; element doesn't occupy the full width, but there still can't be any element next to it, because of the block-display. Here's a code snippet to reproduce:

div {  width: 50%}

<div>Placeholder text</div>

Why inspect element shows input element's width as 100% on hovering, but its actual width is less?

The element itself is only so wide, but its rendering block is full-width (as indicated by the orange rectangle). The space occupied by the rendering block is essentially reserved. If you were to put another input after that one it would drop to a new line.

<form>
    <input type="text" value="blocked!" style="display: block;" />
    <input type="text" value="dropped!" /> 
    <input type="text" value="not dropped!" />
</form>

Can't remove right margin

Try setting display: inline-block; for #ageYearFieldset div.

why is right margin of overconstrained element not behaving as expected

It is assigning used right margin of -102px. The margin shown in the screenshot is the computed value, not the used value.

If all of the above have a computed value other than 'auto', the values are said to be "over-constrained" and one of the used values will have to be different from its computed value. If the 'direction' property of the containing block has the value 'ltr', the specified value of 'margin-right' is ignored and the value is calculated so as to make the equality true.

See 6.1.2. Computed values and 6.1.3. Used values

---

Related Topics