HTML заданная и фактическая ширина блока различается. PPI

Question

Задал ширину body 1200, заскринил посчитал, по факту 1500.

Есть 2 блока с такими свойствами:

section{
    float: left;
    margin: 20px 50px;
    width: 900px;
    background-color: silver;
}

aside{
    float: left;
    margin: 20px 50px;
    width: 100px;
    background-color: silver;
}

если к ширине одного из них прибавить один пиксель то они перестают быть в один ряд значит все правильно с margin.

Я так понимаю это как-то связано с PPI монитора. Фактические размеры всегда отличются? Это сильно путает. Может есть способ седалать все пиксель в пиксель? Или это не нужно и все так верстают?

Answer 1

Если вы хотите сделать положение секций или блоков идеально пиксель в пиксель, то я бы вам посоветовал использовать не пиксельное, а процентное соотношение. Вот пример:

section{
    float: left;
    width: 50%;
    background-color: silver;
}

aside{
    float: left;
    width: 50%;
    background-color: silver;
}

Это придаст вашему коду адаптивность, так же вы можете использовать свойство auto. Пример -

section{
    float: left;
    width: auto;
    background-color: silver;
}

aside{
    float: left;
    width: auto;
    background-color: silver;
}

Если я не правильно понял суть вопроса, то объясните подробнее.

БЛОГ НА HUSL

HTML заданная и фактическая ширина блока различается. PPI

Ответы (1 шт):