Welcome to Part 5 of the CSS Mastery & Responsive Layouts Course. In this part, we will explore Display Types & Visual Formatting.

To build layouts, you must control how elements render adjacent to each other, how they overflow their containers, how their sizing parameters behave under different viewports, and how to hide elements or add visual depth using shadows. We will cover block/inline styling exceptions, visibility settings, sizing bounds, overflow handling, shadows, and interactive properties.

---

Chapter 36: Deep Dive into Display Values

The display property is the most powerful layout property in CSS. It determines the “outer formatting context” of an element box. Let’s cover the four fundamental display values:

36.1 Display: Block (display: block)

Elements styled with display: block occupy the full horizontal width of their parent container.

• Default Elements: <div>, <p>, <h1>-<h6>, <ul>, <ol>, <section>, <header>, <footer>.
• Formatting Rules:
  • Starts on a new line.
  • Stretches horizontally to fill its parent container.
  • Respects width, height, margin, and padding on all four sides.

/* Converts an inline link into a block button that fills the sidebar */
.sidebar-link {
  display: block;
  width: 100%;
  padding: 12px;
}

36.2 Display: Inline (display: inline)

Elements styled with display: inline occupy only the horizontal space required by their content.

• Default Elements: <a>, <span>, <strong>, <em>, <code>.
• Formatting Rules:
  • Does not start on a new line (flows inline with text).
  • Ignores width and height properties entirely.
  • Ignores top and bottom margins (vertical margins have no effect on layout).
  • Vertical padding (top/bottom) is drawn visually but does not push adjacent elements away, often causing visual overlap with surrounding text.

/* Inline styling example */
.highlight-text {
  display: inline;
  padding-left: 5px;
  padding-right: 5px;
  background-color: yellow;
}

36.3 Display: Inline-Block (display: inline-block)

inline-block merges the characteristics of both block and inline display types:

• Formatting Rules:
  • Does not start on a new line (flows inline with text).
  • Respects width, height, margin, and padding on all sides (like block elements).
  • Allows you to create styled grid components that flow side-by-side without needing Flexbox or Grid.

/* Side-by-side cards using inline-block */
.feature-card {
  display: inline-block;
  width: 30%;
  margin: 1.5%;
  padding: 20px;
  background: white;
  border: 1px solid #ddd;
}

36.4 Display: None (display: none)

Removes the element entirely from the visual render tree.

• Formatting Rules:
  • The element occupies zero space on the page.
  • All child elements inside it are also hidden.
  • Often used dynamically with JavaScript to show/hide menus, dropdowns, or tabs.

---

Chapter 37: Display: None vs Visibility: Hidden vs Offscreen Layouts

A common interview question is the difference between display: none and visibility: hidden.

Property & Value	Render Tree Inclusion	Space Occupied on Screen	Interactive (Clickable)	Screen Reader Audibility
display: none	No (removed from layout)	0px (adjacent elements collapse)	No	Silent (hidden from screen readers)
visibility: hidden	Yes (remains in layout)	Yes (leaves empty blank space)	No	Silent (hidden from screen readers)

37.1 Accessible Offscreen Layouts (.sr-only)

If you want to hide elements visually but keep them audible for screen readers (e.g. for accessibility aids), use the standard .sr-only class:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

---

Chapter 38: Block Formatting Context (BFC)

A Block Formatting Context (BFC) is a region of the page in which block boxes are laid out. It acts as an isolated layout sandbox. Elements inside a BFC do not affect elements outside, and vice versa.

38.1 What Triggers a BFC?

You can force an element to establish a new BFC by applying any of the following properties:

• display: flow-root (the modern standard way to create a BFC without side effects)
• overflow: hidden, overflow: scroll, or overflow: auto
• display: inline-block
• position: absolute or position: fixed
• display: flex or display: grid
• float: left or float: right
• contain: layout, contain: paint, or contain: content

38.2 Why is BFC Crucial? (3 Main Use Cases)

1. Containing Floated Elements (No Height Collapse)

If a parent contains floated children, its height collapses to 0. Triggering a BFC forces the parent to contain the floated children:

.parent-container {
  display: flow-root; /* Parent height expands to enclose floated children */
}
.floated-child {
  float: left;
  width: 100px;
}

2. Preventing Margin Collapse

Margins of elements inside a BFC do not collapse with their parent element:

.bfc-wrapper {
  display: flow-root; /* margins of paragraph inside stay inside BFC */
}

3. Preventing Text Wrapping Around Floats

Normally, text wraps around a floated image. Creating a BFC on the text block forces it to remain in a clean rectangular column next to the float:

.floated-img { float: left; width: 150px; }
.desc-text {
  display: flow-root; /* Keeps text box aligned, preventing wrap underneath float */
}

---

Chapter 39: Sizing Bounds & Content Keywords

CSS offers properties to set boundaries on sizes, ensuring layouts don’t break on extremely large or tiny viewports.

39.1 Width and Height Constraints

• min-width / min-height: Sets the minimum size limit. The element cannot shrink smaller than this value.
• max-width / max-height: Sets the maximum size limit. The element cannot grow larger than this value.

/* Create a container that fits small screens but stays within 1200px on desktop */
.site-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

39.2 Content Sizing Keywords

Instead of declaring static unit values, you can size elements relative to their content using:

• max-content: The box expands to the size needed to fit all content on a single line without wrapping.
• min-content: The box shrinks to the width of the longest single word/element inside it.
• fit-content: Equivalent to max-content but capped at the parent container’s available width.

.badge-label {
  width: fit-content; /* Badge is only as wide as its text label */
  background-color: #e2e8f0;
}

---

Chapter 40: Overflow Handling & Scroll Snapping

When an element contains content that is larger than its specified dimensions, the overflow property controls how that content renders.

40.1 Overflow Values

• overflow: visible (Default): The content spills out of the boundaries and draws over neighboring elements.
• overflow: hidden: The spilling content is cropped out and invisible.
• overflow: scroll: Adds vertical and horizontal scrollbars, whether the content overflows or not.
• overflow: auto: Adds scrollbars only if the content overflows the bounding box.

40.2 Scrollbar Gutter Control & Shifts

To prevent layout shifts when scrollbars appear:

html {
  scrollbar-gutter: stable; /* Keeps a blank scrollbar track open, preventing shifts */
}

40.3 CSS Scroll Snapping

Allows locking the viewport container to specific items when scrolling:

.scroll-container {
  scroll-snap-type: x mandatory; /* Snap on horizontal scrolling */
  overflow-x: auto;
  display: flex;
}
.scroll-item {
  scroll-snap-align: start; /* Alignment lock point */
}

---

Chapter 41: Elevation & Shadows Systems

Using custom properties, we can design a standard 5-level elevation system:

:root {
  --shadow-1: 0 1px 3px rgba(0,0,0,0.12);
  --shadow-2: 0 4px 6px rgba(0,0,0,0.15);
  --shadow-3: 0 10px 15px rgba(0,0,0,0.18);
  --shadow-4: 0 20px 25px rgba(0,0,0,0.20);
  --shadow-5: 0 25px 50px rgba(0,0,0,0.25);
}
.card-raised {
  box-shadow: var(--shadow-2);
}
.card-raised:hover {
  box-shadow: var(--shadow-4); /* Raises card on hover */
}

---

Chapter 42: Interactive Formatting Properties

CSS controls mouse hover cursors, user selections, and pointer-event mechanics.

42.1 Cursor Customization (cursor)

Tells the browser which cursor icon to display when hovering over elements:

.clickable-card {
  cursor: pointer; /* Hand pointer */
}
.disabled-button {
  cursor: not-allowed; /* Circle with slash */
}

42.2 User Select (user-select)

Controls whether the user is allowed to highlight/select text inside elements:

.non-copyable-code {
  user-select: none; /* Prevents text selection */
}
.select-all-input {
  user-select: all; /* Clicking selects the entire block instantly */
}

42.3 Pointer Events (pointer-events)

Determines how elements interact with mouse click events:

.overlay-decorative {
  pointer-events: none; /* Clicks pass right through to elements underneath */
}

42.4 Element Resize (resize)

Allows users to resize element boxes (like textareas). Note: resize requires the element to have overflow set to values other than visible to function:

.resize-box {
  resize: both; /* User can drag corners to resize horizontally/vertically */
  overflow: auto;
}

---

Chapter 43: Display & Visuals Practice

43.1 Practice Exercises

1. Exercise 1: Create a responsive sidebar block that has a minimum width of 250px, a maximum width of 350px, and wraps overflow text cleanly into a vertical scroll feed.

   .sidebar-widget {
     width: 25vw;
     min-width: 250px;
     max-width: 350px;
     height: 100vh;
     overflow-y: auto;
     scrollbar-gutter: stable;
   }

2. Exercise 2: Create a parent element containing two floated elements without collapsing its layout height, using only modern BFC triggers.

   .gallery-grid {
     display: flow-root; /* Triggers BFC to contain floats */
     background-color: #f8fafc;
     padding: 1rem;
   }
   .gallery-grid img {
     float: left;
     width: 48%;
     margin: 1%;
   }

3. Exercise 3: Create an offscreen screen-reader element class and build a form submit button containing an icon that speaks “Search site” only to screen readers.

   <button>
     <svg class="icon">...</svg>
     <span class="sr-only">Search site</span>
   </button>

43.2 Self-Check Questions

1. What formatting rules govern inline elements?
   • Answer: Inline elements flow next to each other, ignore width/height properties, ignore vertical margins, and vertical paddings do not push adjacent elements away.
2. Which property trigger is recommended to create a BFC without visual side effects?
   • Answer: display: flow-root.
3. What is the difference between max-content and fit-content?
   • Answer: max-content expands elements to fit content onto one line without wrapping even if it overflows parents. fit-content behaves similarly but caps width to parent container boundaries to prevent overflows.
4. Does an element with display: none occupy space on screen?
   • Answer: No, it is removed from the layout hierarchy entirely.
5. Why does scrollbar-gutter: stable improve user experience?
   • Answer: It reserves empty track space for the scrollbar, preventing pages from shifting horizontally when content heights trigger vertical scrolling.
6. Does visibility: hidden exclude elements from the browser rendering DOM?
   • Answer: No, it remains in the DOM tree and occupies visual layout space, it is only invisible.
7. What property makes elements ignore click events?
   • Answer: pointer-events: none.
8. What are two requirements for the resize property to work on elements?
   • Answer: It must be a block-like container, and it must have overflow set to values other than visible (e.g., auto, scroll, or hidden).
9. What default elements have inline-block display settings?
   • Answer: Elements like <button>, <input>, <select>, and <img>.
10. Can margins collapse between elements inside different BFC blocks?
    • Answer: No, margins only collapse between elements sharing the same block formatting context.
11. Name five properties that trigger BFC creation.
    • Answer: display: flow-root, overflow: hidden, position: absolute, display: flex, and float: left.
12. How does the .sr-only class hide elements visually without silencing screen readers?
    • Answer: It positions the element absolutely with 1px height/width, crops overflow, and uses clip coordinates to reduce visual rendering dimensions to zero while maintaining text availability in the accessibility tree.
13. What does containment (contain: layout) do to layout processing?
    • Answer: It isolates the element’s layout from the rest of the document, meaning changes inside the element will not trigger reflows in parent nodes, optimizing rendering performance.
14. Why does scroll-snap-type: x mandatory require scroll-snap-align on child elements?
    • Answer: Because scroll-snap-type defines the snapping axis and behavior on the container, but scroll-snap-align is required on children to specify which edge (start, center, or end) should align with the container viewport.
15. Can user-select: none be overridden by children?
    • Answer: Yes, children can override user-select with user-select: text or user-select: all to allow selection inside specific text spans even if the parent blocks it.