Why do divs move in place after inserting content? [closed]

Question

Why do divs move in place after inserting content? [closed]

Navigation

#1 by (2 votes)

1

If I remove the tags it is aligned correctly, but when I insert the image or, for example, h1 it already descends again, if it inserts in all it returns to normal, but why does it occur?

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

asked by anonymous 01.02.2016 / 18:48

1 answer

Save an image pasted to Excel worksheet through VBA Problems to enable remote access SQL Server + Android

score 2 · Answer 1

Just put:

vertical-align: top or overflow: hidden .

In class box .

Using vertical-align: top , the elements will be at the top independent of their content, which may change the parent element because of its native properties, such as margin and padding .

Using overflow: hidden will do the same as vertical-align , but it can hurt 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 child element properties.

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>