Element Types

Elements can be classified as inline or block elements, and the distinction lies in their default behavior.

• Inline elements typically do not start on a new line and only take up as much width as necessary. They allow other elements to sit beside them on the same line;
• Block elements, on the other hand, typically start on a new line and extend the full width of their container. They create a new "block" or "box" for content.

Block elements

Block elements occupy the entire width of their parent container and typically begin on a new line. Examples of block elements encompass <div>, <h1> through <h6>, <p>, <ul>, <ol>, <li>, and various others. These elements can have their width, height, margin, padding, and border properties customized using CSS.

Inline elements

Inline elements do not initiate a new line and only occupy the width essential for their content. Examples of inline elements encompass <a>, <span>, <img>, <input>, and several others. Unlike block elements, inline elements cannot be assigned specific values for height, width, margin, or padding using CSS. However, it's worth noting that border can be applied to inline elements.

Inline-block elements

In addition to block and inline elements, there exists a third category known as inline-block elements. Similar to inline elements, inline-block elements do not initiate a new line and occupy just enough width for their content. What sets them apart is their ability to have height, width, margin, padding, and border properties specified using CSS. Examples of inline-block elements include <button>, <select>, and <textarea>.