Как сделать плавающий элемент с относительным отступом сверху?

 <!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>« здоровья</title>
    </head>
 
<body>
<style>
html,
body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
#block1{
color:red;
background-color:yellow;
margin-left:10px;
margin-top:10px;
margin-bottom:10px;
border:3px solid red;
width:250px;
}
#block2{
color:#fff;
font-weight:900;
background-color:green;
margin-left:65%;
float:right;<!-- плавающий отступ от правого края  -->
margin-top:11%;
margin-right:5%;
margin-bottom:12%;
border:3px solid blue;
width:250px;
}
#wrapper{
border:3px solid black;
}
#p1{
padding-left:1%;
padding-top:1%;
}
 #p2{
padding-left:15px;
padding-top:15px;
}
</style>
 
<div id="wrapper">
    <div id="block1">
         <img src="1.jpg">
         <p id="p1"> Пример отступа блоков друг от друга(внешний)</p>
    </div>
    <div id="block2">
         <img src="2.jpg">
                  <p id="p2"> Пример отступа блоков друг от друга(внешний)</p>
     </div
    </div>
</div>
 
 
 
 
 
</body>
</html>
3 ответа

Так у тебя уже есть эти правила. Плавающий отступ это float, отступы есть margin, есть padding отступы можешь задавать в px, %, em, rem, vh, vw, vmin, vmax
, 
#block2{
   color:#fff;
   font-weight:900;
   background-color:green;
   margin-left:65%;
   float:right;<!-- плавающий отступ от правого края  -->
   margin-top:11%;
   margin-right:5%;
   margin-bottom:12%; 
   border:3px solid blue;
   width:250px;
}


Плавающий отступ это float, отступы есть margin, есть padding отступы можешь задавать в px, %, em, rem, vh, vw, vmin, vmax
Как переводить в пиксели указанные вами единицы?


Вот таблица сравнения. Гуглите. http://pxtoem.com/