NUS Hackers Wiki
NUS Hackers Wiki
  • NUS Hackers Wiki
  • Hackerschool
    • Virtual Machines and Linux
    • Beginners' Guide to the Terminal
      • Introduction to the Terminal
      • Modern Shell Tools
      • Shell Scripting
      • Real World Scripting
      • Resources
    • Self-Hosting: Three Easy Pieces
      • 1. Setting up your server
      • 2. Running Services
      • 3. Monitoring your server
    • Vim
    • Introduction to Zig
      • Language Basics
      • Error Handling
      • Memory Management
      • Working with C
      • Exploring comptime
    • CI/CD with Github Actions
      • Background
      • Basics of Github Actions
        • Target workflow
        • Running unit tests
        • Linting code
        • Deploying to Github Pages
      • Advanced use cases
        • Pollers
        • Github script
        • Executing third-party scripts
        • Reusable workflows
      • Cookbook
    • Lightning Git
      • Git Concepts
      • Getting Started with Git
      • Making your first commit
      • Branching
      • Merge Conflicts
      • Integrating remote repositories
      • Collaborative Workflows
      • Commit Manipulation and Reflog
      • Interactive rebasing
      • filter-repo
  • Orbital
    • JavaScript
      • Browser Developer Tools
      • Getting Started
      • Datatypes
      • Operators and Operations
      • Loops and Conditions
      • Functions
      • Strings
      • Arrays
      • HTML
        • Getting Started
        • Tag Attributes
        • HTML Forms
        • Browser Inspector
      • CSS
        • Selectors
        • Colors in CSS
        • Measurements in CSS
        • The Box Model
        • Adding Styles - Part 1
        • Adding Styles - Part 2
      • Working with the DOM
        • Querying the DOM - Selectors
        • Querying the DOM - Element Attributes
        • Querying the DOM - Element Styles
        • Events with JS and HTML
        • Exercise: Click Counter
        • Editing the DOM
        • Fetch Requests
        • Exercise: The NUSMods API
    • React
      • Setup
      • State
    • React Native
      • Setup
      • Intro to JSX
      • Basic Syntax
      • Handling UI
      • Props
      • State Management
    • Git
      • Setup
      • Command Glossary
      • Fundamental Concepts
        • Getting Started
        • Integrating Remote Repositories
        • Branching
        • Merge Conflicts
      • Collaborative Workflows
        • Fork and PR Workflow
        • Branch and PR Workflow
      • Advanced Concepts
        • Ignoring Files
        • Commit Message Conventions
        • Github Collaborators
        • CI/CD with Github Actions
        • Advanced Git Commands
      • FAQ
    • Telegram Bot
      • Creating a TeleBot
      • API Calls
      • Telebot Basics
      • Integrating API's
    • Relational Database
      • Database Overview
      • Database Design
      • Entity Relationship Diagram
      • SQL Basics & PostgreSQL
    • TypeScript
      • Types and Interfaces
      • Utility Types
      • Typing Component Props, Events, and Hooks
      • Why You Should Avoid Using any (and What to Do Instead)
      • TypeScript Tricks You’ll Use All the Time in React
Powered by GitBook
On this page
  • Notation
  • Absolute measurements
  • Relative measurements
  • Difference between absolute and relative units
  • Next steps
Edit on GitHub
Export as PDF
  1. Orbital
  2. JavaScript
  3. CSS

Measurements in CSS

In CSS, you may want to define measurements for elements such as font size, height, width, curvature, thickness etc. There are multiple ways to define measurements, so let's look at a few.

Notation

CSS measurement values are written as a number followed by the unit (with no spaces in-between). Example: 20px.

Negative numbers are ignored (except for padding and margin properties) and are considered 0. Decimal values are accepted.

Absolute measurements

The measurement units have absolute values, meaning they do not change no matter the system, browser or screen size. There are a few that we use in our daily lives:

  • mm (millimeters)

  • cm (centimeters)

  • in (inches)

They can be converted between as follows:

  • 1cm = 1000mm

  • 1in = 2.54cm

There are a few more absolute measurements:

  • px (pixels) - width of a pixel on the screen

  • pt (points) - often used for font size; similar to font size values on MS Word

  • pc (picas) - a typographic unit, similar to pt

They can be converted to other units as follows:

  • 1in = 96px

  • 1in = 72pt

  • 1pc = 12pt

Note that pt and pc, while supported, are not very commonly used as a unit of measurement in CSS. px is the most commonly used, followed by mm and then cm and in to a much lesser extent.

The nature of being absolute measurements means that regardless of the computer specs, screen size, browser width/type, resolution, size of other elements, etc. the values correspond to constant sizes. This means that 100px measures the same physical distance whether its on Safari or Chrome, whether its on an old iPhone 3 or an 80 inch 4K ultra TV screen, whether the browser is max size or resized to half.

Relative measurements

Far more common (and in some ways better) than absolute measurements are the relative measurement units. These units are relative to some or the other size, and they will differ based on these dimensions. Let's take a look a few of them:

  • % - this is relative to the size of the parent element as a percentage (i.e. 45% means 45% the width of the parent element)

  • em - this is relative to the font size of the current element; 2em means 2 times the font size

  • rem - this is relative to the font size of the root element; 2rem means 3 times the font size of the root

  • vw - this is relative to the width of the viewport; 1vw means 1% the width of the viewport[

  • vh - this is relative to the height of the viewport; 1vh means 1% the height of the viewport

The viewport is the browser window; resizing the browser window changes the dimensions of the viewport

Difference between absolute and relative units

The following two figures demonstrate the difference between absolute and relative measurements. Note how the element size changes as the browser window is resized. Note that

  1. The screen is 1440px wide

  2. The browser window initially takes up the entire screen

  3. 50vw is 50% the width of the browser, or 1440/2 = 720px. This means the two orange boxes initially have the same width.

Next steps

We'll look at the box model for elements to introduce padding and margin, before we finally begin adding CSS to the page.

PreviousColors in CSSNextThe Box Model

Last updated 1 year ago

Absolute measurement (720px)
Relative measurement (50vw)