Skip to content
hands-on lab

Specifying CSS Box Model Element Properties

Difficulty: Intermediate
Duration: Up to 45 minutes
Students: 49
Start lab
On average, students complete this lab in10m
Get guided in a real environmentPractice with a step-by-step scenario in a real, provisioned environment.
Learn and validateUse validations to check your solutions every step of the way.
See resultsTrack your knowledge and monitor your progress.
About
Author

Description

The CSS box model is used to control the layout and position of HTML elements.

In this lab, you will see the different properties available in the CSS box model.

Learning Objectives

Upon completion of this beginner level lab, you will be able to:

  • Set the size of a division element
  • Set the margin, padding, and border of an HTML element
  • Set the display CSS property to various values

Intended Audience

  • Beginners learning front-end development
  • Software Engineers who need to learn front-end technologies to expand their skillset

Prerequisites

Familiarity with the following will be beneficial but is not required:

  • Cascading Style Sheets (CSS)
  • Hypertext Markup Language (HTML)

The following content can be used to fulfill the prerequisite:

Updates

July 24, 2024 - Resolved an issue preventing the development interface from appearing

Covered topics

Development
CSS
Hands-on Lab UUID

Lab steps

0 of 3 steps completed.Use arrow keys to navigate between steps. Press Enter to go to a step if available.
  1. Sizing the Content of a HTML Element
  2. Using the Box Model's Margin, Padding, and Border Properties
  3. Using the Display Property

Lab Rules