px values in dev tools in chrome browser vs css pixels value

Question

I am learning CSS and understanding how pixels work . Suppose I have an HTML :

            <div id='first' class='float-child'>
            <p>The img element tells the browser, “Place an image here.” You’ve already gotten
a glimpse of it used to place banner graphics in the examples in Chapter
4, Creating a Simple Page. You can also place an image element right in the
flow of the text at the point where you want the image to appear, as in the
following example. Images stay in the flow of text, aligned with the baseline
of the text, and do not cause any line breaks (HTML5 calls this a phrasing
element), as shown in FIGURE 7-2:</p>
            </div>

Now I set the div to 1200 px:

#first {
    background-color: blueviolet;
    width:1200px;
}

If I measure the div with any pixel ruler in Chrome I see it to be 1200 px allright (first photo) but if I use the chrome dev tool and measure the div by shrinking the browser window the div appears to be 1093 px ( second img).

I fail to understand why is Chrome Dev Tool is reporting about 100px less or is there something wrong with my understanding of pixels ?

MaxiGui · Accepted Answer · 2020-10-09 06:42:22Z

I think that you are mixing width of your window with width of your div#first.

Indeed the number you see in the right corner up, is the width of the window.

To check the true width of your div just scroll down to your css on the right to get to see it.

In the image below, you can see in RED the size of the screen and in GREEN down the size of your div.

So it will happen the same with the height if you are setting a very bigger height on your div than on your screen size.

DEMO:

#first {
  background-color: blueviolet;
  width:1200px;
}

<div id='first' class='float-child'>
  <p>The img element tells the browser, “Place an image here.” You’ve already gotten
  a glimpse of it used to place banner graphics in the examples in Chapter
  4, Creating a Simple Page. You can also place an image element right in the
  flow of the text at the point where you want the image to appear, as in the
  following example. Images stay in the flow of text, aligned with the baseline
  of the text, and do not cause any line breaks (HTML5 calls this a phrasing
  element), as shown in FIGURE 7-2:</p>
</div>

Knownow · Accepted Answer · 2020-10-12 01:07:48Z

0

I had set the zoom level to 90% and hence the window width was less than the box width ( by about 100px) eventhough I had dragged the window to just touch the right edge of the box . I am very new to CSS and since then has been reading up on CSS pixels , device pixels , zooming etc . The concepts seems to be a little time consuming to understand . I hope to understand how they work and add to this answer in some days .

answered Oct 12, 2020 at 1:07

Knownow

3851 gold badge5 silver badges20 bronze badges

Collectives™ on Stack Overflow

px values in dev tools in chrome browser vs css pixels value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related