码农教程 - 一技在手,衣食无忧! tools

目录

CSS max-width Property

❮ Previous Complete CSS Reference Next ❯

Example

Set the maximum width of a <p> element to 150 pixels:

p.ex1 {
  max-width: 150px;
}
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The max-width property defines the maximum width of an element.

If the content is larger than the maximum width, it will automatically change the height of the element.

If the content is smaller than the maximum width, the max-width property has no effect.

Note: This prevents the value of the width property from becoming larger than max-width. The value of the max-width property overrides the width property.

Default value: none
Inherited: no
Animatable: yes, see individual properties. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.maxWidth="600px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
max-width 1.0 7.0 1.0 2.0.2 7.0

CSS Syntax

max-width: none| length|initial|inherit;

Property Values

Value Description Demo
none No maximum width. This is default Play it »
length Defines the maximum width in px, cm, etc. Read about length units Play it »
% Defines the maximum width in percent of the containing block Play it »
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit

More Examples

Example

Set the maximum width of a <p> element to 50% of the container:

p.ex1 {
  max-width: 50%;
}
Try it Yourself »

Related Pages

CSS tutorial: CSS Height and Width

CSS reference: min-width property

HTML DOM reference: maxWidth property


❮ Previous Complete CSS Reference Next ❯