Every element in CSS is rendered as a rectangular box composed of four layers: the content itself (text or images), padding (space between the content and the border), the border that surrounds the padding, and margin (space outside the border separating the element from its neighbors). By default, the `width` and `height` properties apply only to the content area, so an element with `width: 200px`, `padding: 20px`, and `border: 5px solid` actually takes up 250 pixels of horizontal space. Setting `box-sizing: border-box` includes padding and border within the declared width and height, making the element exactly 200 pixels wide total. Margin behaves differently from padding in one notable way: adjacent vertical margins collapse, meaning the larger of two sibling margins wins instead of adding together. Margin collapse does not apply to horizontal margins, inside Flexbox or Grid layouts, or on elements with `overflow: auto`. For internationalized layouts, CSS logical properties such as `margin-inline-start`, `padding-block`, and `inset-inline-start` describe directions relative to the writing mode rather than the viewport, automatically adapting to right-to-left languages or vertical text.
The `display` property controls how an element participates in layout. `block` elements take the full available width and start on a new line (as with `
The `position` property offers five values that determine how an element is placed relative to the page. `static` is the default and follows normal document flow. `relative` offsets the element from its normal position while still occupying its original space. `absolute` removes the element from flow and positions it relative to the nearest positioned ancestor (an ancestor whose position is anything other than `static`), and the element scrolls along with the page. `fixed` also removes the element from flow but positions it relative to the viewport, so it stays in place when the user scrolls. `sticky` toggles between `relative` and `fixed` based on scroll position, making it ideal for headers that should stay visible after scrolling past them. Stacking order among positioned elements is controlled by `z-index`, where higher values appear in front of lower ones, but `z-index` only works on positioned elements and child elements are confined within their parent's stacking context.
A few additional layout concepts round out this picture. The `float` property historically removed elements from normal flow and placed them to the left or right with text wrapping around, but floated elements cause their parent to collapse in height. The traditional clearfix solution used a `::after` pseudo-element with `clear: both` to force the parent to contain its floats, though modern Flexbox and Grid layouts have largely replaced floats for page structure. The `overflow` property controls what happens to content that exceeds an element's box; `overflow: hidden` clips the overflow and also creates a new block formatting context, which prevents margin collapse with the parent and forces the element to contain its floated children.
All chapters
Drill it
Reading is not remembering. These come from the HTML CSS Fundamentals deck:
Q
What is the purpose of HTML5 semantic elements?
HTML5 semantic elements provide meaningful structure to web pages. They describe the role of their content rather than just its appearance. Examples include <...
Q
What is the difference between <section> and <div>?
<section> is a semantic element that represents a thematic grouping of content, typically with a heading. <div> is a non-semantic generic container...
Q
What is the <article> element used for?
The <article> element represents a self-contained composition that could be independently distributed or reused. Examples include:Blog postsNews articlesF...
Q
What is the purpose of the <nav> element?
The <nav> element represents a section of a page that contains navigation links, either within the site or to other sites. It is intended for major naviga...