Gabi Mena
Gabi Mena
Dec 10, 2017 · 4 min read

When you need to modify a web appearance, you need some resources like display, box model and position. You can change the position design and appearance properties like margin, border, padding and width/height.

Let’s talk about the display property:

The CSS display property defines how to visualize an HTML element in a browser and how the other elements are located in connection with this.

It depends on the display value, an element could occupy all the container, just the space necessary to show their elements, a piece of the container or be hidden.

The web browsers applies a display value as default. We are going to learn four different values for the position:

  • Block
  • Inline
  • Inline-block
  • None

Block elements shows the complete width of the container, for example, if you have an element block in an <aside> label, this label will occupy all the width. This elements always starts in a new line and never will have more elements at the same line. The explorers (Chrome, Mozilla, Explorer…) will assign by default the visual mode in the HTML, and some elements like paragraph (<p>), <div> or list (<ol>, <ul>) always are in block.

In the next example you can see the operation of the elements block and how the text occupy the width of the container.

Display: block

In CSS we can make an item that is not showing in block, change. We can use the label display: block in the item. As shown in the next code.

.element { display: block; }

These elements are shown by default in block:

<address>, <article>, <aside>, <blockquote>, <canvas>, <dd>, <div>, <dl>, <dt>, <fieldset>, <figcaption>, <figure>, <footer>, <form>, <h1>-<h6>, <header>, <hr>, <li>, <main>, <nav>, <noscript>, <ol>, <output>, <p>, <pre>, <section>, <table>, <tfoot>, <ul> y <video>.


Inline elements will occupy all the width of their content, one behind the other one until they fill all the content. When an element is too long and it doesn’t fit in the row it will occupy the next row. Here is an example of inline elements.

Display: inline

The code is .element { display: inline; }

These elements are shown in line by default:

<a>, <b>, <big>, <i>, <small>, <tt>, <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <time>, <var>, <bdo>, <br>, <img>, <map>, <object>, <q>, <script>, <span>, <sub>, <sup>, <button>, <input>, <label>, <select> y <textarea>


Inline-block elements are a mix between the behaviour of the elements inline and block. It occupy the width of the content and behaves as if it were one more word within the text, but you can make width, height, and filler, and margin top too.

If you need to use inline-block, the code is .element { display: inline-block; }

Display: inline-block

Hidden elements: Sometimes we want to hide some elements for example a submenu from a navigation bar and show them again when the mouse is over a menu element.

Here an example of hidden elements. The Home’s submenu is hidden.

The code is .element { display: hidden; }

Display: none

If we show them when click it would be something like this.

Display: block or inline or inline-block

Positions: You can change the position of the boxes when you scroll and modify the position of the objects with the label position in the CSS. This label is very important because if doesn’t exist all the content would be linear.

This property has four possible labels.

  • static: this is the default position.
  • relative: you can modify the actual position of the item.
  • absolute: with this label the container can define his size and the position is the same of the body or or the first element that have a different position to static
  • fixed: when you use this label, the elemento is fixed when you scroll, like an anchor.

Adalab

Sobre Adalab, adalabers, voluntarios y empresas colaboradoras

Gabi Mena

Written by

Gabi Mena

Front-End Developer

Adalab

Adalab

Sobre Adalab, adalabers, voluntarios y empresas colaboradoras

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade