Measuring Sizes

3.1 The width Property

The dimensions of blocks in CSS play a crucial role in building web page layouts. They determine how elements will display and interact with surrounding elements. Let's take a look at the width, height, max-width, and max-height properties, which allow us to set block sizes.

The width property sets the width of an element. It can be specified in various units like pixels (px), percentages (%), em, rem, and others.

Values

• Automatic value: auto — the width of the element is determined automatically based on its content and surroundings
• Absolute units: px, pt, cm, mm, in and others
• Relative units: %, em, rem, vw, vh and others

Example usage:

    
      .box {
        background-color: #3498db;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-fixed {
        width: 200px;
      }

      .box-percentage {
        width: 50%;
      }
    
  

    
      <div class="box box-fixed">Fixed width (200px)</div>
      <div class="box box-percentage">Width percentage (50%)</div>
    
  

Code Explanation:

• .box-fixed: an element with a fixed width of 200 pixels
• .box-percentage: an element with a width of 50% from the parent element

3.2 The height Property

The height property sets the height of an element. It can also be specified in various units.

Values:

• Automatic value: auto — the height of the element is determined automatically based on its content and surroundings
• Absolute units: px, pt, cm, mm, in and others
• Relative units: %, em, rem, vh, vw and others

Example usage:

    
      .container {
        height: 300px;
      }

      .box {
        color: white;
        padding: 10px;
      }

      .box-fixed-height {
        height: 150px;
        background-color: #2ecc71;
      }

      .box-percentage-height {
        height: 50%;
        background-color: #7a5c71;
      }
    
  

    
      <div class="container">
        <div class="box box-fixed-height">Fixed height (150px)</div>
        <div class="box box-percentage-height">Height percentage (50%)</div>
      </div>
    
  

Code Explanation:

• .box-fixed-height: an element with a fixed height of 150 pixels
• .box-percentage-height: an element with a height of 50% from the parent element

3.3 The max-width Property

The max-width property sets the maximum width of an element. This is a constraint that prevents the element from expanding beyond the set value.

Values:

• No limit: none — the element can expand to any width
• Absolute units: px, pt, cm, mm, in and others
• Relative units: %, em, rem, vh, vw and others

Example usage:

    
      .box {
        background-color: #e74c3c;
        color: white;
        padding: 10px;
        margin: 10px;
      }

      .box-max-width {
        width: 100%;
        max-width: 300px;
      }
    
  

    
      <div class="box">Width 100% (by default)</div>
      <div class="box box-max-width">Max width 300px</div>
    
  

Code Explanation:

• .box-max-width: an element with a maximum width of 300 pixels. The content won't allow the element to expand beyond 300 pixels

3.4 The max-height Property

The max-height property sets the maximum height of an element. This is a constraint that prevents the element from growing beyond the set value.

Values:

• No limit: none — the element can expand to any width
• Absolute units: px, pt, cm, mm, in and others
• Relative units: %, em, rem, vh, vw and others

Example usage:

    
      .box {
        background-color: #9b59b6;
        color: white;
        padding: 10px;
        max-height: 35px;
        overflow: auto;
      }
    
  

    
      <div class="box">
        <p>Extra text for scroll demonstration.<br>Extra text for scroll demonstration.<br>Extra text for scroll demonstration.</p>
      </div>
    
  

Code Explanation:

• max-height: an element with a maximum height of 35 pixels. If the element's content exceeds this value, it will scroll thanks to the overflow: auto; property

1

Task

Frontend SELF EN, level 16, lesson 3

Locked

Block Width

Block Width

Open

1

Task

Frontend SELF EN, level 16, lesson 3

Locked

Maximum Height

Maximum Height

Open