Block-level elements consume the full available inline space and generate line breaks before and after their box. Common examples include <article>, <section>, and <form>. To constrain width and center horizontally within the viewport:

.content-wrapper {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

Using max-width rather than width ensures the element adapts gracefully when the viewport narrows, eliminating horizontal scrollbars on mobile devices.

Display Behaviors and Flow Control

Inline elements respect horizotnal spacing but ignore vertical dimensions. Setting display: none removes the element entirely from the accessibility tree and document flow, whereas visibility: hidden merely renders the element transparent while preserving its spatial footprint.

The inline-block value creates rectangular boxes that flow inline while respecting block-like properties:

.feature-card {
  display: inline-block;
  width: 220px;
  height: 140px;
  vertical-align: top;
  margin: 0.5rem;
}

Flexbox provides sophisticated distribution of space and alignment:

.layout-flex {
  display: flex;
  gap: 1.5rem;
}

.sidebar {
  flex: 0 0 240px;
}

.main-content {
  flex: 1 1 auto;
}

For perfect vertical and horizontal centering:

.centered-viewport {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

Box Model Menagement

Standard box model calculations add padding and borders to the declared width, causing unexpected overflows. Two elements with identical width declarations render at different sizes when padding or borders differ:

.standard-module {
  width: 480px;
  padding: 20px;
  margin: 20px auto;
}

.decorated-module {
  width: 480px;
  padding: 40px;
  border: 6px solid #333;
  margin: 20px auto;
  box-sizing: border-box;
}

Applying box-sizing: border-box forces the browser to include padding and border thickness within the specified width, simplifying dimensional calculations.

Positioning Strategies

Static positioning follows normal document flow and cannot be offset. Relative positioning shifts elements visually without disturbing surrounding content:

.offset-element {
  position: relative;
  top: -15px;
  left: 30px;
  background: #fff;
  z-index: 10;
}

Fixed positioning anchors elements to the viewport, useful for persistent navigation or chat widgets:

.sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: #f8f9fa;
}

Absolute positioning removes elements from normal flow and positions them relative to the nearest positioned ancestor (or the initial containing block if none exists):

.modal-frame {
  position: relative;
  min-height: 100vh;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
}

Float and Clearance Patterns

Floating elements enable text wrapping and side-by-side arrangements:

.inline-media {
  float: right;
  margin: 0 0 1rem 1rem;
  max-width: 45%;
}

Subsequent elements can clear floats to resume normal block formatting:

.text-column {
  clear: both;
}

Alternatively, contain floats using the overflow technique on parent containers:

.float-container {
  overflow: auto;
}

Responsive Units and Fragmentation

Percentage-based widths create fluid layouts that adopt to container dimensions:

.responsive-media {
  float: right;
  width: 40%;
}

CSS Multi-column Layout distributes content across specified column counts:

.newspaper-layout {
  column-count: 3;
  column-gap: 2rem;
}

Layout Pattern Implementations

Absolute Positioning Approach:

.page-container {
  position: relative;
}

.nav-panel {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
}

.content-area {
  margin-left: 260px;
}

Float-Based Alternative:

.nav-panel {
  float: left;
  width: 240px;
}

.content-area {
  margin-left: 260px;
}

Inline-Block Method:

.nav-panel,
.content-area {
  display: inline-block;
  vertical-align: top;
}

.nav-panel {
  width: 25%;
}

.content-area {
  width: 75%;
}

Note that inline-block elements exhibit whitespace gaps when HTML markup contains spaces or line breaks between elements.