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.
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.
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; }
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; }
If we show them when click it would be something like this.
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.
