<?xml version="1.0" encoding="utf-8"?>

CSS width property

CSS width property Bad Practice
CSS width property Best Practice

The width property defines how wide the element's content can get. By default, the width property doesn't include padding, borders, and margins.

Let's say there's a section of content <div> with width: 240px;. It means that the text inside this section will take up exactly 240px horizontally. However, keep in mind that the actual size of that element will include padding, border, and margins on both sides. If their values aren't 0, the total size of the element will exceed 240px.

Pro Tip: Typically, when you create a block element, such as <div>, <p>, etc., the browser automatically sets its width to 100% and its height to whatever is needed to show all the content.

Improve your UX & Product skills with interactive courses that actually work