Kamyar Parastesh Kamyar Parastesh - 1 month ago 8
CSS Question

Setting 2 dives with padding of 10 px

I have simple html page which works with 2 bootstrap and some handwrting css.
Here is the

html
page:



.header {
width: 1024px;
height: 60px;
background-color: #ffffff;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.09);
}
.gotoAndBot {
width: 109px;
height: 20px;
font-family: Roboto;
font-size: 15px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
letter-spacing: 0.2px;
text-align: center;
color: #62e2c0;
}
#gal-bot-marvin-jpg {
width: 40.7px;
height: 41.7px;
}
.Oval-3 {
width: 42.9px;
height: 44px;
background-color: #ffffff;
border: solid 4px #62e2c0;
}

<div class="container">
<div class="header">
<div class="row" style="padding-left:10 px;">
<div class="col-sm-1">
<!--img id="Oval-3" src="../assets/robot.png"-->
<div class="Oval-3">
Robot
</div>
</div>
<div>
<div class="col-sm-1 gotoAndBot " style="padding-left:10 px;">
gotoAndBot
</div>
</div>
</div>
</div>
</div>





I need to put the
Oval-3
class with a 15 px
margin
from the inner side div tag (
header
).
Also, there should be 10 px margin between 2 divs in the row (
Oval-3
and the
gotoAndBot
)
But it is not like it?

Answer
  1. You need to remove a space in style="padding-left:10px;" in block with classes gotoAndBot and row

  2. If you want to have some space within div.header, you can add padding: 15px; to this block. But keep in mind that you will also need to remove fixed height, otherwise, it won't work the way you want. For example, instead of using fixed height, you can use min-height: 60px;

  3. To have a space of 10px between 2 divs in the row (Oval-3 and the gotoAndBot ), you will need to rewrite some bootstrap classes. Because bootstrap classes like col-sm-1 etc have padding-right, padding-left and width set by default.