Search code examples
htmlcssalignment

div boxes won't line up using attribute display:inline-block;

A couple things I'm really confused with about my code:

  1. Without the "vertical-align" line that's commented out, the div boxes don't line up.
  2. A <p> tag inside a <div> adds an extra space to the top.

  3. The picture does not show up at all.

    <!DOCTYPE html>
<html>
<head>
<style>
div {
    display: inline-block;
    margin-left: 5px;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
<!--vertical-align: middle; -->
    border: 2px dashed #008000;
}
</style>
<title>Frends n shiz</title>
</head>
<body>
    <div><p>billy</p><img href="http://i.imgur.com/mango.jpg" /></div>
    <div><p>bob</p></div>
    <div>joe</div>
    <div>schmoe</div>
    <div><p>jane</p></div>
    <div>bane</div>
</body>
</html>
Solution

  • The picture does not show up at all.

    It should be src on image not href:

    <img src="http://i.imgur.com/mango.jpg" />

    Instead of

    <img href="http://i.imgur.com/mango.jpg" />

    A P tag inside a div adds an extra space to the top.

    And yes default p is for paragraph so it will wrap down has a default margin added by the browser. You can reset p margin though to p{margin:0}

    Without the "vertical-align" line that's commented out, the div boxes don't line up.

    After the above fixes You can use float:left instead of display:inline-block and see the difference on how it is rendered, not sure how you want it to be..

    Something like this ??