☰

CSS Size & Display Properties

📐 Size & Display

Width Height Min-width Max-width Display Overflow Visibility Opacity

Assignment

Assignment 1 Assignment 2
📝 width – Element Width
Definition: Sets the width of an element's content area. This property controls how much horizontal space an element occupies on the page. The actual space taken may be larger if padding, border, or margin are applied. Width can be specified in pixels, percentages, or other CSS units.

Default Value: auto (width determined by content)

Values: length (px, em, rem) | percentage (%) | auto | max-content | min-content | fit-content(length)

✦ Fixed Width Example (Pixels)

Fixed width of 250px - element maintains this size regardless of content

Width: 250px Fixed
.fixed-width {
  width: 250px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px;
  border-radius: 8px;
}

✦ Responsive Width Example (Percentage)

Width of 100% - element takes full width of parent container

Width: 100% (Full Width)
.full-width {
  width: 100%;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  padding: 20px;
  border-radius: 8px;
}

✦ Half Width Example

Width of 50% - element takes half the parent width

Width: 50%
.half-width {
  width: 50%;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  padding: 20px;
}

✦ Auto Width Example

Width: auto - element width adjusts based on content

Width: Auto
.auto-width {
  width: auto;
  display: inline-block;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  padding: 20px;
}

✦ Min-width & Max-width Combination

Width constrained between minimum and maximum values

Width: 70% (min: 200px, max: 600px)
.constrained-width {
  width: 70%;
  min-width: 200px;
  max-width: 600px;
  background: linear-gradient(135deg, #fa709a, #fee140);
  padding: 20px;
}
📝 height – Element Height
Definition: Sets the height of an element's content area. This property controls how much vertical space an element occupies. Like width, height can be affected by padding, border, and margin. The default height is typically determined by the content itself unless explicitly set.

Default Value: auto (height determined by content)

Values: length (px, em, rem) | percentage (%) | auto | max-content | min-content | fit-content(length)

✦ Fixed Height Example (Pixels)

Fixed height of 120px - element maintains this height

Height: 120px
.fixed-height {
  height: 120px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  display: flex;
  align-items: center;
  justify-content: center;
}

✦ Full Viewport Height (100vh)

Height set to 100% of viewport height

Height: Large Box
.full-height {
  height: 100vh;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  display: flex;
  align-items: center;
}

✦ Percentage Height

Height of 50% - element takes half parent's height

Height: 50% of Parent
.half-height {
  height: 50%;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  display: flex;
  align-items: center;
}

✦ Auto Height (Content-Based)

Height: auto - adjusts to fit content

Height: Auto
Content determines height
Multiple lines of text
.auto-height {
  height: auto;
  background: linear-gradient(135deg, #43e97b, #38f9d7);
  padding: 20px;
}
📝 max-width – Maximum Width Limit
Definition: Sets a maximum width limit for an element. The element can be smaller than this value, but will never exceed it. This is extremely useful for responsive design and preventing elements from becoming too wide. Max-width is commonly used to contain content and improve readability.

Default Value: none (no maximum)

Values: length (px, em, rem) | percentage (%) | none | max-content | fit-content(length)

✦ Restricting Content Width

Max-width: 400px - content never exceeds this width

This content will never exceed 400px width. Resize window to see responsiveness.
.content-container {
  max-width: 400px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  padding: 20px;
}

✦ Full Width with Max-width

Width: 100%, Max-width: 800px - responsive but bounded

Width: 100% but capped at 600px maximum
.responsive-bounded {
  width: 100%;
  max-width: 800px;
  background: linear-gradient(135deg, #f093fb, #f5576c);
  padding: 20px;
  margin: 0 auto;
}

✦ Image Max-width

Max-width: 100% - images never overflow container

img {
  max-width: 100%;
  height: auto;
}
📝 max-height – Maximum Height Limit
Definition: Sets a maximum height limit for an element. Elements can be shorter but never taller than this specified value. When content exceeds max-height, overflow behavior (scroll, hidden, etc.) determines how extra content is handled. Useful for creating expandable sections and preventing layout breakage.

Default Value: none (no maximum)

Values: length (px, em, rem) | percentage (%) | none | max-content | fit-content(length)

✦ Fixed Max-height with Overflow

Max-height: 100px with overflow:auto - scrollable content box

Line 1: This box has a maximum height.
Line 2: Content exceeding this height
Line 3: Creates a scrollbar when needed
Line 4: Perfect for list containers
Line 5: And content previews
Line 6: Scroll to see more
.scrollable-box {
  max-height: 100px;
  overflow: auto;
  background: gradient;
  padding: 15px;
}

✦ Hidden Overflow

Max-height: 80px with overflow:hidden - content is cut off

Line 1: This content is truncated
Line 2: Text beyond max-height
Line 3: Is completely hidden
Line 4: No scrollbar appears
.hidden-content {
  max-height: 80px;
  overflow: hidden;
  background: gradient;
}

✦ Expandable Section Pattern

Max-height with transition for smooth expand/collapse

Expandable Content Box
This section can smoothly expand and collapse
Using CSS transitions on max-height
Great for accordions and dropdowns
.expandable {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.expandable.active {
  max-height: 500px;
}
📝 min-width – Minimum Width Requirement
Definition: Sets a minimum width that an element must maintain. Elements will always be at least this wide, even if content is shorter. This prevents elements from becoming too small on narrow screens. Min-width is crucial for responsive design to maintain usability and prevent content from becoming unreadable.

Default Value: 0

Values: length (px, em, rem) | percentage (%) | max-content | fit-content(length) | auto

✦ Fixed Minimum Width

Min-width: 200px - element never becomes narrower

Min-width: 200px
<div style="min-width: 80px;"> Min-width = 80px </div>

6. min-height – Minimum Height

Meaning: Minimum height required.
Min-height = 80px
<div style="min-height: 80px;"> Min-height = 80px </div>
📝 display – How Element Appears
Definition: Controls how an element is rendered and flows in the document. The display property determines whether an element is treated as block-level or inline, and how it participates in the layout. Different display values enable different layout techniques like flexbox and grid. This is one of the most fundamental CSS properties.

Default Value: Varies by element (block for div, inline for span)

Values: block | inline | inline-block | flex | grid | none | table | table-cell | and more

✦ display: block

Block elements take full width and start on new line

Block Element 1 - Full Width

Block Element 2 - New Line
.block {
  display: block;
  width: 100%;
  background: gradient;
  margin-bottom: 10px;
}

✦ display: inline

Inline elements flow with text, no width/height

Inline 1 Inline 2 Inline 3
.inline {
  display: inline;
  margin-right: 5px;
}

✦ display: inline-block

Inline-block combines inline flow with block properties

Box 1
Box 2
Box 3
.inline-block {
  display: inline-block;
  width: 120px;
  height: 60px;
  margin-right: 10px;
}

✦ display: flex

Flexbox layout for flexible aligned items

Flex Item 1
Flex Item 2
Flex Item 3
.flex-container {
  display: flex;
  gap: 10px;
}

.flex-item {
  flex: 1;
}

✦ display: grid

Grid layout for structured 2D layouts

Grid 1
Grid 2
Grid 3
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

✦ display: none

display: none removes element from layout completely

This element is hidden by display: none
This element is visible
.hidden {
  display: none;
  /* Element takes no space */
}
📝 visibility – Hide or Show Elements
Definition: Controls whether an element is visible or hidden. Unlike display: none, visibility: hidden keeps the element's space in the layout - it just becomes invisible. This property is useful when you need to hide elements while maintaining the document flow. Works well with transitions for fade effects.

Default Value: visible

Values: visible | hidden | collapse

✦ visibility: visible

Element is fully visible (default)

Visible Element - Normal appearance
.visible-element {
  visibility: visible;
  background: gradient;
  padding: 15px;
}

✦ visibility: hidden

Element is hidden but space remains (notice the empty space)

Hidden Element
This element below is visible
.hidden-element {
  visibility: hidden;
  /* Element is hidden but space is preserved */
}

✦ Difference: visibility vs display

Compare visibility: hidden (reserves space) vs display: none (no space)

visibility: hidden

Hidden
Below Element

display: none

Hidden
Below Element
/* Reserves space */
.visibility-hidden {
  visibility: hidden;
}

/* Removes from layout */
.display-none {
  display: none;
}
📝 overflow – Handle Extra Content
Definition: Determines what happens when content exceeds the element's dimensions. This property controls whether overflowing content is clipped, hidden, scrollable, or visible. Essential for managing content that doesn't fit within defined bounds. The overflow property impacts both horizontal and vertical directions, though you can control them separately with overflow-x and overflow-y.

Default Value: visible

Values: visible | hidden | scroll | auto | clip | inherit

✦ overflow: visible (Default)

Content flows outside the box boundaries

This content overflows and extends beyond the box!
.visible {
  width: 150px;
  height: 50px;
  overflow: visible;
  /* Content spills out */
}

✦ overflow: hidden

Excess content is clipped and hidden

This content gets cut off and hidden from view.
.hidden-overflow {
  width: 150px;
  height: 50px;
  overflow: hidden;
  /* Content is clipped */
}

✦ overflow: scroll

Always shows scrollbars for accessing content

Scrollable content.
Line 2
Line 3
Line 4
Line 5
.scrollable {
  width: 150px;
  height: 60px;
  overflow: scroll;
  /* Scrollbars always visible */
}

✦ overflow: auto

Scrollbars appear only when needed

Auto overflow.
Line 2
Line 3
Line 4
Line 5
.auto-scroll {
  width: 150px;
  height: 60px;
  overflow: auto;
  /* Smart scrollbars */
}

✦ overflow-x: Horizontal Overflow

Controls horizontal scrolling for wide content

Horizontal text that extends beyond the box →→→→
.horizontal-scroll {
  width: 150px;
  overflow-x: auto;
  white-space: nowrap;
}

✦ overflow-y: Vertical Overflow

Controls vertical scrolling for tall content

Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
.vertical-scroll {
  height: 80px;
  overflow-y: auto;
  /* Vertical scrolling only */
}

✦ Practical: Chat Box with Vertical Scroll

Simulating a chat interface with scrollable messages

Hello!
Hi there! How are you?
Doing great!
That's awesome!
.chat-box {
  height: 400px;
  overflow-y: auto;
  background: dark-gradient;
  padding: 12px;
  border-radius: 8px;
}
📝 opacity – Transparency Control
Definition: Controls the transparency level of an element. Values range from 0 (completely transparent/invisible) to 1 (completely opaque/visible). Unlike visibility: hidden, opacity still allows the element to be interactive even when transparent. Opacity affects the entire element and all its children. Perfect for creating fade effects, watermarks, and disabled state styling.

Default Value: 1 (fully opaque)

Values: 0 to 1 (or 0% to 100%)

✦ opacity: 1 (Fully Opaque)

Default opacity - element fully visible

Opacity: 1.0 (Fully Visible)
.fully-opaque {
  opacity: 1;
  background: gradient;
  color: white;
}

✦ opacity: 0.75 (75% Visible)

Slight transparency - element mostly visible

Opacity: 0.75 (75% Visible)
.75-opacity {
  opacity: 0.75;
  background: gradient;
}

✦ opacity: 0.5 (50% Visible)

Medium transparency - element semi-transparent

Opacity: 0.5 (50% Visible - Semi-transparent)
.half-opacity {
  opacity: 0.5;
  background: gradient;
  /* Moderate transparency */
}

✦ opacity: 0.25 (25% Visible)

High transparency - element barely visible

Opacity: 0.25 (25% Visible)
.25-opacity {
  opacity: 0.25;
  background: gradient;
}

✦ opacity: 0 (Invisible)

Fully transparent but element still occupies space (but not visible here)
Hidden with Opacity
.invisible {
  opacity: 0;
  /* Transparent but interactive */
}

✦ Opacity Hover Effect

Hover to see opacity change smoothly

Hover Me - Opacity changes smoothly
.opacity-hover {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.opacity-hover:hover {
  opacity: 0.5;
}

✦ Disabled State with Opacity

Using opacity to show disabled state

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}