как делать margin в процентах?

Question

если у меня есть блок-1 шириной в 1000px, и мне нужно передвинуть левый край блока-2 (с помощью margin-left), с шириной в 200px, от левого края блока-1 на, скажем, 300px но в процентах, то как мне это сделать?

Answer 1

Обернуть в контейнер и относительно него уже двигать

<style>
   #container{
      border:2px solid #ffde00;
      margin:50px;
   }
   #div1{
      border:1px solid #333;
      margin-left:0;
      height:300px;
   }
   #div2{
      border:1px solid #ff0000;
      margin-left:30%;
      height:300px;
   }
</style>
<div id="container">
<div id="div1">
FIRST DIV
</div>
<div id="div2">
SECOND DIV
</div>
</div>

Answer 2

300пикс делим на экран монитора и умножаем на 100. И получим значение в процентах. После чего вместо процентов пишем vw (1% ширины окна).

То есть: 300/1366 = 0.2196193265 * 100 = 21.96% = 22vw (если округлить)

БЛОГ НА HUSL

как делать margin в процентах?

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