The box model defines properties such as size, padding, border, and margin of an element, which are essential for positioning and styling elements on a page.To create complex layouts and style elements on a webpage using CSS, it is important to understand the box model.Therefore, mastering the box model is essential for web developers and designers who work with CSS.
Content:Content refers to the text or images within an element.
Padding:Padding is the space between the content and the element’s border.
Border:Border is a line that surrounds an element’s content and padding.
Margin:Margin is the space outside an element’s border.
Types of Boxes in CSS
In CSS, there are several types of boxes
Block-Level Boxes
In CSS, block-level boxes are elements that take up the full width of their parent container and create a new line after the box. Block-level elements have a defined width and height, and can have padding, margin, and a border set. Examples of block-level elements include <div>, <p>, and <h1>-<h6>.For example you can see in the following images:
As you can see that div and paragraph is taking its full width.
So, this is know as block-level elements.
Inline-level boxes
These boxes only take up as much width as necessary and do not create a new line after the box. Examples of inline-level elements include <span>, <a>, and <img>.
SO, span is the example of Inline-level boxes as it only takes the necessary width.
The examples show that the div element and the paragraph element are taking up the full width, whereas the span element is only taking up the necessary width.
Absolute Boxes
Absolute boxes are a type of box in CSS that are positioned relative to the nearest “positioned ancestor” element, meaning that their placement is not affected by other elements on the page. This allows them to be positioned precisely where desired without impacting the layout of other elements.
The CSS for the above code can be seen in the figure below, where the styles for the “baseCard”, “image”, “cards_title”, and “cards_descriptions” classes are defined.
An the given figure, the parent container with class “baseCard” has a “position: relative” property applied to it, creating a relative positioning context for its child elements. The child elements, such as “cards_title”, can then be positioned absolutely within the parent container while maintaining their relative position to their parent. This allows for more precise and flexible layout design.
You can easily see how abosolute and relative are visualized in the above graphic.
