Learning CSS Series

Part 3 – Diving deeper into CSS

Display Property
Visibility Property
Block vs Inline property
Problem Statement on CSS

Display Property

The Display property allows us to change the way we display the elements on the page.

The value ‘none’ of Display property removes the element entirely from the Document flow of the Webpage.

There are a few other useful values such as ‘block’, ‘inline’, ‘inline-block’, ‘flex’ etc. that we can use to further style how our CSS elements are listed on the Webpages.

E.g. <a href=”customers/index.html” style=’display:none;’>Customers</a>

Visibility Property

The Visibility property works the best if we simply want to hide the element but not remove it from the document flow.

This is in sharp contrast to the Display property which completely modifies the way the element is displayed on the web page. On applying ‘none’ value, we simply remove the element from the DOM tree under the Display property, however under ‘visibility:hidden;’, the elements position remains the same however it simply gets hidden.

Block vs inline elements

Block-level elements are rendered as a block and hence take up all the available horizontal space. You can set margin-top and margin-bottom and two block-level elements will render in two different lines.

Some examples are: <div> , <section> , <article> , <nav> but also <h1> , <h2> etc and <p> .

Inline elements on the other hand only take up the space they require to fit their content in. Hence two inline-elements will fit into the same line (as long as the combined content doesn’t take up the entire space in which case a line break would be added).

They also use the box-model you learned about but margin-top and margin-bottom have no effect on the element. padding-top and padding-bottom also have a different effect. They don’t push the adjacent content away but they will do so with the element border. You can read more about that behavior in the following article: https://hacks.mozilla.org/2015/03/understanding-inline-box-model/

Additionally, setting a width or height on an inline element also has no effect. The width and height is auto to take as much space as required by the content.

Logically, this makes sense since you don’t want your inline elements to destroy your multi-line text-layout. If you want to do so or need both block-level and inline behavior, you can set display: inline-block to merge behaviors.

Some example elements are: <a> , <span> , <img>

Problem statement:

Suppose you want to create a navbar where the links appear to the right and the brand logo appears on the top left corner and links appear starting from the right margin.

E.g.

Solution:
To achieve this we need to understand the flow of the app:
1) First the brand should appear in the header.
2) A nav needs to be created for all the links.
3) CSS classes need to be applied for the containers of the links and brands.

The code for HTML template is:

<header class=“main-header”>
<div >
<a href=“index.html”>
uHost
</a>
</div>
<nav class=“main-nav”>
<ul class=“main-nav__items”>
<li class=“main-nav__item”>
<a href=“packages/index.html”>Packages</a>
</li>
<li class=“main-nav__item”>
<a href=“customers/index.html” >Customers</a>
</li>
<li class=“main-nav__item”>
<a href=“start-hosting/index.html”>Start Hosting</a>
</li>
</ul>
</nav>
</header>

CSS classes:

.main-header{
width: 100%;
background:#2ddf5c;
padding: 8px 16px;
}

.main-header>div{
display: inline-block;
}
.main-nav{
display: inline-block;
width: calc(100% – 60px);
text-align: right;
}
.main-nav__item{
margin: 0;
padding: 0;
list-style: none;
}
.main-nav__item{
display: inline-block;
}

Here the important things to note are the following:
1) The display is set to inline-block. This means that all the subsequent elements in the main-nav__item container shall be displayed in a single line block.

2) The width of the main-nav container is calculated using the calc function. This is a special function used to do dynamic mathematic calculations.

3) The need to use the calc function is because when we align the items of navbar without considering the block difference for navbar items and the header brand, there will be a significant non-alignment of both. We need them to appear in a single line, hence we subtract the pixel difference manually to attain this.

4) Furthermore the combinator main-header>div is used to make sure the next dive from header also comes in the same line as it.

Subsequently we can use the vertical-align: middle property to make sure that the elements are aligned to the middle of the navbar.

This property allows the elements to aligned in the middle of any block from a vertical perspective.

So that’s it till then! Make sure you subscribe for more!