My inline-block divs are displayed in strange zig-zag pattern - css

Question

I'm trying to visualise simple commands and their arguments in HTML. Desired output:
Actual output:
The code I used:
html {
background-color: #222;
}
div.script {
display: table-cell;
vertical-align: top;
}
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
div.script-command p.name {
text-align: center;
font-size: 15pt;
}
div.script-command div.arguments {
padding: 0.5 em;
text-align: center;
}
div.script-command div.arguments .argument {
font-family: "Courier new", consolas;
color: black;
font-size:11pt;
background-color: #CCC;
border: 1px solid white;
padding: 3pt;
margin: 2pt;
display: inline-block;
}
<div class="script">
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">xxx
</span>
</div>
</div>
<div class="script-command">
<p class="name">aaa
</p>
<hr>
<div class="arguments">
</div>
</div>
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">gfdgf
</span>
<span class="argument">1000
</span>
<span class="argument">5
</span>
</div>
</div>
<div class="script-command">
<p class="name">dd\;
</p>
<hr>
<div class="arguments">
</div>
</div>
</div>
The wrong alignment happens when the .arguments div is empty. Why does it happen? How do I fix it?

Answer 1

Use vertical-align: top; on your inline-block elements.

Answer 2

You need to set the vertical-alignment of the inline-block element.
If you want to glance at the spec,
This shorthand property specifies how an inline-level box is aligned within the line. Values are the same as for its longhand properties, see below.
Since you have the baseline set as default/not specifically set, it will style to the lowest line, and hence by setting it to top will align the inline-block elements to the top line.
html {
background-color: #222;
}
div.script {
display: table-cell;
vertical-align: top;
}
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
vertical-align: top;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
div.script-command p.name {
text-align: center;
font-size: 15pt;
}
div.script-command div.arguments {
padding: 0.5 em;
text-align: center;
}
div.script-command div.arguments .argument {
font-family: "Courier new", consolas;
color: black;
font-size:11pt;
background-color: #CCC;
border: 1px solid white;
padding: 3pt;
margin: 2pt;
display: inline-block;
}
<div class="script">
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">xxx
</span>
</div>
</div>
<div class="script-command">
<p class="name">aaa
</p>
<hr>
<div class="arguments">
</div>
</div>
<div class="script-command">
<p class="name">s
</p>
<hr>
<div class="arguments">
<span class="argument">gfdgf
</span>
<span class="argument">1000
</span>
<span class="argument">5
</span>
</div>
</div>
<div class="script-command">
<p class="name">dd\;
</p>
<hr>
<div class="arguments">
</div>
</div>
</div>

Answer 3

checkout this fix
div.script div.script-command {
display: inline-block;
max-width: 10em;
min-width:3em;
vertical-align:top;
border: 1px solid #66E239;
background-color: rgba(102,226,57, 0.3);
border-radius: 0.5 em;
}
http://jsfiddle.net/jrpq1xe7/