Значения пикселей в инструментах разработчика в браузере Chrome и значение пикселей CSS ⇐ CSS

[Anonymous]

Я изучаю CSS и понимаю, как работают пиксели. Предположим, у меня есть HTML:

Код: Выделить всё

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:

Теперь я установил размер div на 1200 пикселей:

Код: Выделить всё

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

Если я измерю div с помощью любой пиксельной линейки в Chrome, я увижу, что он составляет 1200 пикселей, все в порядке (первое фото), но если я использую инструмент разработчика Chrome и измерю div, уменьшив размер браузера В окне размер div составляет 1093 пикселей (второе изображение).




Я не понимаю, почему Chrome Dev Tool сообщает примерно на 100 пикселей меньше, или что-то не так с моим пониманием пикселей?

Подробнее здесь: https://stackoverflow.com/questions/642 ... xels-value