CODEWITHSUNDEEP
htmlcssalignment
Giancarlo Corzo
Giancarlo Corzo

Reputation: 2006

Display inline block text inside issue

I have been trying out display inline-block, everything worked out great if I didn't add anything into the divs but when I do the div collapsed and I don't know exactly why.

Any idea?

https://jsfiddle.net/giancorzo/ebqoptbd/

HTML:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>8 cajas</title>
        <link rel="stylesheet" type="text/css" href="main.css">
    </head>
    <body>
        <div class="caja"></div>
        <div class="caja-grande">
            <div class="caja inline-block">
                <span>Hola mundo</span>
            </div>
            <div class="caja inline-block">
            </div>
            <div class="caja inline-block">
        CSS:    </div>
        </div>
        <div class="caja inline-block"></div>
        <div class="caja inline-block"></div>
        <div class="caja"></div>
    </body>
</html>

CSS:

.caja{
    background-color: gray;
    width: 100px;
    height: 100px;
    border: 1px solid black;
    margin: 5px;
}

.inline-block{
    display: inline-block;
}

.caja-grande{
    background-color: gray;
    border: 1px solid black;
    padding: 5px;
    width: 350px;
    margin: 5px;
}

Upvotes: 0

Views: 5670

Answers (3)

LXhelili
LXhelili

Reputation: 980

Use overflow: hidden at .inline-block to make this work. 

.inline-block{
    display: inline-block;
    overflow: hidden;
}

Upvotes: 2

potashin
potashin

Reputation: 44581

The issue is due to default vertical alignment of inline elements – baseline, the text inside element affects it and pushes div to the bottom. Use vertical-align: top, for example, to suppress this behavior.

JSFiddle

Upvotes: 8

dippas
dippas

Reputation: 60553

display:inline-block creates a small gap, so add font-size:0 to parent. plus add vertical-align:top since by default inline-block is baseline

with all of this you have fixed your issue.

here is the snippet:

.caja {
  background-color: gray;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 5px;
}
.caja-grande {
  background-color: gray;
  border: 1px solid black;
  padding: 5px;
  width: 350px;
  margin: 5px;
  font-size: 0
}
.inline-block {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}
<div class="caja"></div>
<div class="caja-grande">
  <div class="caja inline-block">
    <span>Hola mundo</span>
  </div>
  <div class="caja inline-block">
  </div>
  <div class="caja inline-block">
  </div>
</div>
<div class="caja inline-block"></div>
<div class="caja inline-block"></div>
<div class="caja"></div>

you can find more info (and options on how to solve this in other ways) in this article Fighting the Space Between Inline Block Elements

Upvotes: 3

Related Questions