Some wired behavior for display inline block

Question

Update it's a question of whether inline-block elements contains something or not, You can search for it and find a better solution.

The page contains three div(gray rectangle) and the first div(parent) contains three blue child-div. Parent divs are inline-block, child-divs are also the same. Why the first parent-div is moved downwards? I'm supposed that they should be aligned in a line.

<body>
    <section>
        <div class = "container">
            <div class = "load_1"></div>
            <div class = "load_1"></div>
            <div class = "load_1"></div>
        </div>
        <div class = "container">

        </div>
        <div class = "container">

        </div>
    </section>
</body>

css

           section{
                width:100%;
                height:100vh;
                background-color: rgba(236, 240, 241,1.0);
            }
            div.container{
                display: inline-block;
                width:150px;
                height:150px;
                margin:10px;
                background-color: rgba(189, 195, 199,1.0);
                border-radius: 5px;
            }
            div.container:first-child{
                margin-left: 20px;
            }
            div.container .load_1{
                width:20px;
                height:20px;
                display: inline-block;
                background-color: rgba(52, 152, 219,1.0);
            }

Please check here in JSfiddle.

http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block add `float:left` in your code , and if you want know correctly you can read in here for more infomation — Akashii, Mar 30 '17 at 13:31
@ThanhTùng I already know the basic information about the display. But I still want to know why a inline-block elements contains another inline-block elements behave like this? — 好吃仙人, Mar 30 '17 at 13:56
here is what you want to know http://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward . hope it help for you — Akashii, Mar 30 '17 at 14:15

score 0 · Answer 1 · answered Mar 30 '17 at 13:30

0

Just add float: left which pushes everything up and left.

    div.container:first-child{
        margin-left: 20px;
        float: left;
    }

answered Mar 30 '17 at 13:30

Keith

4,059
2
32
56

can you explain why it behaves like this? before adding the float:left – 好吃仙人 Mar 30 '17 at 13:54

Grinex · Accepted Answer · 2017-03-30T14:05:07.463

0

just put float:left on the div.container

check the code below:

    section {
        width: 100%;
        height: 100vh;
        background-color: rgba(236, 240, 241, 1.0);
    }

    div.container {
    /* display: inline-block; */
        width: 150px;
        height: 150px;
        margin: 10px;
        background-color: rgba(189, 195, 199, 1.0);
        border-radius: 5px;
        float: left;
    }

    div.container:first-child {
        margin-left: 20px;
    }

    div.container .load_1 {
        width: 20px;
        height: 20px;
        display: inline-block;
        background-color: rgba(52, 152, 219, 1.0);
    }

<section>
    <div class="container">
        <div class="load_1"></div>
        <div class="load_1"></div>
        <div class="load_1"></div>
    </div>
    <div class="container">

    </div>
    <div class="container">

    </div>
</section>

edited Mar 30 '17 at 14:05

answered Mar 30 '17 at 13:31

Grinex

128
1
1
10

can you explain why it behaves like this? before adding the float:left – 好吃仙人 Mar 30 '17 at 13:54
@JungleDesigner - `float:left` indicates that the next element must float on the left side of its containing block – Grinex Mar 30 '17 at 13:57
Thanks, But do you know why a inline-block elements contains another inline-block elements behave like this? – 好吃仙人 Mar 30 '17 at 14:14
@JungleDesigner in your example one of your container contains another div element inside it and the 2 other container has none. it behaves like as it uses just the size necessary to hold the content and not all the line. – Grinex Mar 30 '17 at 14:25
@JungleDesigner another example. using your code but this time, i put some elements on the 2 other container from your code. see the difference here [fiddle demo](https://jsfiddle.net/zLfruyeL/). it display on 1 line because all of the container has its content – Grinex Mar 30 '17 at 14:32
@JungleDesigner hope my explanation helps you a lot :) – Grinex Mar 30 '17 at 14:35
pretty thanks! So it's a question of that whether a inline-block contains something or not. ! Thank you very much for your help – 好吃仙人 Mar 30 '17 at 16:09
@JungleDesigner no worries :) – Grinex Mar 30 '17 at 16:12

score 0 · Answer 3 · answered Mar 30 '17 at 13:39

Add a vertical-align rule to your div.container element.

See Snippet Below:

section{
   width:100%;
   height:100vh;
   background-color: rgba(236, 240, 241,1.0);
  }
  div.container{
   display: inline-block;
   width:150px;
   height:150px;
   margin:10px;
   background-color: rgba(189, 195, 199,1.0);
   border-radius: 5px;
      vertical-align: top;
  }
  div.container:first-child{
   margin-left: 20px;
  }
  div.container .load_1{
   width:20px;
   height:20px;
   display: inline-block;
   background-color: rgba(52, 152, 219,1.0);
  }

<body>
 <section>
  <div class = "container">
   <div class = "load_1"></div>
   <div class = "load_1"></div>
   <div class = "load_1"></div>
  </div>
  <div class = "container">

  </div>
  <div class = "container">

  </div>
 </section>
</body>

JSFiddle: https://jsfiddle.net/8bmdpqer/

Some wired behavior for display inline block

3 Answers3