Why do Divs move after inserting content?

Asked

Viewed 68 times

1

If I take the tags it is aligned right, however when I insert the image or, for example, H1 it already goes down again, if insert in all it goes back to normal, but because this occurs?

body {
  background-color: #DDDDDD
}
#container1 {
  width: 100%;
  height: 200px;
  text-align: center;
}
.box {
  display: inline-block;
  margin: 5px;
}
#ativos {
  width: 180px;
  height: 190px;
  background-color: #1461c4;
}
#status {
  width: 244px;
  height: 190px;
  background-color: #DE962F;
}
#instalados {
  width: 216px;
  height: 190px;
  background-color: #DE962F;
}
#recebimentos {
  width: 613px;
  height: 190px;
  background-color: #5cb85c;
}
<div id="container1">
  <div id="ativos" class="box">
    <img src="icones/ativos.png">
    <!--<H5>CLIENTES ATIVOS</H5>-->
  </div>
  <div id="status" class="box">
    <!--<H5>STATUS CLIENTES</H5>-->
  </div>
  <div id="instalados" class="box">
    <img src="icones/ion.png">
    <!--<h5>CLIENTES INSTALADOS</h5>-->
  </div>
  <div id="recebimentos" class="box">
    <img src="">
    <!--<h5>RECEBIMENTOS LOCAL MÊS</h5>-->
  </div>
</div>

html css

  • Vitor, your question is very confusing. Read it here: http://answall.com/help/how-to-ask will help you next time.

1 answer

2

Just put:

vertical-align: top or overflow: hidden.

In class box.

Using the vertical-align: top, elements will be at the top regardless of their content that can change the parent element due to its native properties, such as margin and the padding.

Using the overflow: hidden shall carry out the same vertical-align, but it can harm you in other things if you set a fixed width or height. The overflow: hidden does not allow the parent element to be modified by properties of the child elements.

body {
  background-color: #DDDDDD
}
#container1 {
  width: 100%;
  height: 200px;
  text-align: center;
}
.box {
  display: inline-block;
  margin: 5px;
  vertical-align: top;
}
#ativos {
  width: 180px;
  height: 190px;
  background-color: #1461c4;
}
#status {
  width: 244px;
  height: 190px;
  background-color: #DE962F;
}
#instalados {
  width: 216px;
  height: 190px;
  background-color: #DE962F;
}
#recebimentos {
  width: 613px;
  height: 190px;
  background-color: #5cb85c;
}
<div id="container1">
  <div id="ativos" class="box">
    <img src="icones/ativos.png">
    <!--<H5>CLIENTES ATIVOS</H5>-->
  </div>
  <div id="status" class="box">
    <!--<H5>STATUS CLIENTES</H5>-->
  </div>
  <div id="instalados" class="box">
    <img src="icones/ion.png">
    <!--<h5>CLIENTES INSTALADOS</h5>-->
  </div>
  <div id="recebimentos" class="box">
    <img src="">
    <!--<h5>RECEBIMENTOS LOCAL MÊS</h5>-->
  </div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.