Display Properties in CSS

This week we have been learning about css and html, to markup languages that make websites look pretty. Upon building a website, one aspect that you are sure to come across is how to display your elements on a page. Putting a box here and a box there may not be as easy as you think. But once you understand the "display" property in css, it becomes a lot easier. The three "display" properties were going to talk about are: block, inline-block, and inline. The css syntax looks like this:

inline

Inline elements do exactly as you may think, they display elements "in a line." A horizontal line to be clear. They allow other elements to reside to their left and right. A really good example of when you would want to display inline elements is for a navigation bar. For example:

          html:

          <div class="inline">
          <ul>
            <li>Nav1</li>
            <li>Nav2</li>
            <li>Nav3</li>
          </ul>
            </div>

          css:

           .inline {
            text-align: center;
          }

          .inline li {
            display: inline;
            border: 2px solid black;
            margin: 0px 20px;
          }
    

Would display...

block

Block elements are the bulkiest of the 3 options. They take up the entire width of the page. You cannot put anything next to them. For example:

          html:

        <div id="block1"></div>
        <div id="block2"></div>

        css:

          #block1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        border: 2px solid black;
        margin: 10px;
        display: block;
      }

      #block2 {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 2px solid black;
        margin: 10px;
        display: block;
      }

would display...

inline-block

Which brings us to the 3rd variation, and combination of the first two. Inline-block elements are block elements that allow other elements to be next to them. It behaves as a block element would, but looks on the page like an inline element. Let's see what happens when I copy the example above, but change "display" to "inline-block".

          html:

        <div id="inline-block1"></div>
        <div id="inline-block2"></div>

        css:

          #block1 {
        width: 100px;
        height: 100px;
        background-color: blue;
        border: 2px solid black;
        margin: 10px;
        display: inline-block;
      }

      #block2 {
        width: 100px;
        height: 100px;
        background-color: red;
        border: 2px solid black;
        margin: 10px;
        display: inline-block;
      }

would display...

Now imagine instead of colored boxes, these elements are pictures, or text boxes, or navigation bars, or ads to be displayed on your web page. Positioning these elements, and understand how to display them will put you well on your way!

Thanks for reading!

-Evan