Introduction to Display

Up until this point, we have relied upon an elements default value of being inline or block-level to define whether it would be presented next to other elements horizontally or placed beneath previous elements in a new “block”.

<!-- Inline Elements -->
<span>
    Inline Element 1
</span>
<span>
    Inline Element 2
</span>

<!-- Block Level Elements -->
<div>
    Block Level Element 1
</div>
<div>
    Block Level Element 2
</div>

.displayed_code_example span,
.displayed_code_example div
{
    margin: 0.5em;
    padding: 0.5em;
}

.displayed_code_example span {
    background-color: #91bdd9;
}
.displayed_code_example div {
    background-color: #d091d9;
}

The CSS display: property allows developers to explicitly specify and/or change these properties for any element. In addition, this property, also allows developers to “hide” an element.

This greatly increases the developers ability to create layouts that support the presentation of content in a web browser.

The display: property is called on the actual element it is being applied to (as opposed to a parent element holding child elements).

display: inline;

The display: inline; rule forces elements to act like inline elements, similar to how the <span> elements acted above. Inline elements, unlike block-level elements;

• only take up as much horizontal space as is needed (ignores width properties.)
• do not force new lines
• “flow” with content on the screen, and as such, do not respect the margin property
• cannot change the vertical (top/bottom) distance between themselves and other elements. Instead, the

NOTE: Since inline elements “flow” it is also important to recognize that their content can “flow” onto the next line…

{ TODO: }

Please read;

• “Understanding the CSS box model for inline elements”, by Patrick Brosset

display: inline-block;

The display: inline-block; rule, like display: inline;, removes ‘new line’s, inherent in block elements. Unlink display: inline;, display: inline-block; also forces elements to respect margin, and vertical spacing properties/rules.

However, this also means these elements will expand, horizontally to fill the parent-container. Therefore, you must explicitly set the width of these elements.

Example

In the following example, notice that the same basic HTML code is used three times in a row. However, the second and third examples have display: inline; & display: inline-block;, respectively.

Notice the differences of these display techniques. Particularly with regard to horizontal and vertical spacing.

<header>
    <div class="menu-item">
        Home
    </div>
    <div class="menu-item">
        About
    </div>
    <div class="menu-item">
        Dada
    </div>
    <div class="menu-item">
        Contact
    </div>
</header>

<header class="">
    <div class="menu-item display-inline">
        Home
    </div>
    <div class="menu-item display-inline">
        About
    </div>
    <div class="menu-item display-inline">
        Dada
    </div>
    <div class="menu-item display-inline">
        Contact
    </div>
</header>

<header class="">
    <div class="menu-item display-inline-block">
        Home
    </div>
    <div class="menu-item display-inline-block">
        About
    </div>
    <div class="menu-item display-inline-block">
        Dada
    </div>
    <div class="menu-item display-inline-block">
        Contact
    </div>
</header>

.display-inline {
    display: inline;
}

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

header {
    background-color: #d0d0d0;
    font-family: sans-serif;
    font-size: 18pt;
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 10px;
    padding: 0.5em;
}


.menu-item {
    margin: auto;
    padding: 0.5em;
    min-width: 150px;
    color: #fff;
    background-color: #673645;
}

.menu-item:hover {
    background-color: #673667;
}

As you can see, we have used display: inline; & display: inline-block; to create our first header menus! And in fact, it is often used for that purpose. (More on that later…)

display: block;

Just like the display property can be used to turn ‘block’ elements into inline or inline-block elements, it can also be used to turn ‘inline’ elements into block elements.

This technique is often used to create vertical menus out of lists, as in the example below. Notice how the use of display: block; on the second set changes the behavior of the elements.

<ul>
    <li><a href="#" class="menu-item">
        Home
    </a></li>
    <li><a href="#" class="menu-item">
        About
    </a></li>
    <li><a href="#" class="menu-item">
        Dada
    </a></li>
    <li><a href="#" class="menu-item">
        Contact
    </a></li>
</ul>

<ul class="">
    <li><a href="#" class="menu-item display-block">
        Home
    </a></li>
    <li><a href="#" class="menu-item display-block">
        About
    </a></li>
    <li><a href="#" class="menu-item display-block">
        Dada
    </a></li>
    <li><a href="#" class="menu-item display-block">
        Contact
    </a></li>
</ul>

.display-block {
    display: block;
}


ul {
    background-color: #d0d0d0;
    font-family: sans-serif;
    text-transform: uppercase;
    list-style-type: none;
    margin: 0px;
    margin-bottom: 10px;
    padding: 0px;
    line-height: 1.3em;
}


.menu-item {
    text-decoration: none;
    width: 100px;
    color: #fff;
    background-color: #673645;
}

.menu-item:hover {
    background-color: #c172c1;
}