Module 5.5 Box model, pseudo class, position

Inline, Block, Inline-block elements

👉 Inline - An inline element only takes up as much width as necessary.

Here are the inline elements in HTML:

<a>

<abbr>

<acronym>

<b>

<bdo>

<big>

<br>

<button>

<cite>

<code>

<dfn>

<em>

<i>

<img>

<input>

<kbd>

<label>

<map>

<object>

<output>

<q>

<samp>

<script>

<select>

<small>

<span>

<strong>

<sub>

<sup>

<textarea>

<time>

<tt>

<var>

👉 Block - A block-level element always starts on a new line.

Here are the block-level elements in HTML:

<address>

<article>

<aside>

<blockquote>

<canvas>

<dd>

<div>

<dl>

<dt>

<fieldset>

<figcaption>

<figure>

<footer>

<form>

<h1>-<h6>

<header>

<hr>

<li>

<main>

<nav>

<noscript>

<ol>

<p>

<pre>

<section>

<table>

<tfoot>

<ul>

<video>

👉 Inline-block - display: inline-block allows setting a width and height on the element.

display: inline-block, the top and bottom margins/paddings are respected

display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

CSS Box model

Explanation of the different parts:

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent

Pseudo class hover, focus, visited, first child, nth child 

<style>

Selector:hover {

style-name : style-value;

}

</style>

Pseudo-element before after

<style>

Selector::before{

style-name : style-value;

}

Selector::after{

style-name : style-value;

}

</style>

The position Property

There are five different position values:

• static
• relative
• fixed
• absolute
• sticky