Because when I write in div it changes position?

Question

Because when I write in div it changes position?

Navigation

#1 by (3 votes)

5

I write something in one of <div> and it changes position. Why?

Here's what's happening: link

HTML:

<div class = "wrap1">
   <div>algo</div>
   <div></div>
   <div></div>
   <div></div>
</div>

CSS:

*{
  box-sizing: border-box;
}
body,html{
   height:100%;
   margin:0;
   padding:0;
}
.wrap1{
   min-height:100%; 
   background: #e1e1e1;
}
.wrap1 div{
   min-width: 45%;
   height:300px;
   min-height:50%;
   margin: 10px;
   display:inline-block;
   padding: 10px;
   border: 1px solid black;
   background: #b0bec5;
   position:relative;
}

html5 css

asked by anonymous 30.06.2014 / 07:21

1 answer

Smooth scrolling on page How do I delete the "shadow" from the focus of a button / button?

score 3 · Accepted Answer

Well now that I understand your question I'll explain:

First it happens because of the inline-block , it behaves according to the content of the page. Try adding content outside DIV and you'll understand that. Example below:

display:inline-block;

<div class = "wrap1">
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
<div>&nbsp;</div>
</div>

Second inline-block is different from block , the block behaves by placing one above the other. The inline-block is very specific for this, adjusting as all the content gives the page, if not, on the same line.

In practice we use the inline-block value when we want to set a value for the width property. Under certain circumstances, some browsers ignore the width property for inline elements, then setting display: inline-block for such elements will force the browser to recognize the value set for the width property.