Drag the edges to resize the window.

Code Editor
Web Browser
Understanding the Box Model

Width: Minimum & Maximum

Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that can limit how narrow or how wide an element's box can be sized to.

  1. min-width - this property ensures a minimum width for an element's box.
  2. max-width - this property ensures a maximum width for an element's box.
p { min-width: 300px; max-width: 600px; }

In the example above, the width of all paragraphs will not shrink below 300 pixels, nor will the width exceed 600 pixels.

Content, like text, can become difficult to read when a browser window is narrowed or expanded. These two properties ensure that content is legible by limiting the minimum and maximum widths of an element.

Report a Bug
If you see a bug or any other issue with this page, please report it here.