Buzz
The customizing size attributes in CSS are used to control the height and width of elements. Refer to the following CSS lesson by Mytour to learn the details of customizing size attributes in CSS.
Customizing Size Attributes in CSS
1. Customizing Size Attributes in CSS
1.1. The width and height properties in CSS
1.2. The max-height property
1.3. The min-height property
1.4. The max-width property
1.5. The min-width property
1. Customizing Size Attributes in CSS
By using the width, height, max-width, and max-height properties in CSS to control the size of elements.
1.1. The width and height properties in CSS
The attributes width and height determine the width and height of the content area of the element. These dimensions exclude padding, border, and margin.
These attributes can take values in length units (px, pt, em, ...), percentage (%) or the keyword auto.
Note: Width and height attributes do not accept negative values.
Example:
The output result appears as follows:
1.2. The max-height property
The max-height property allows specifying the maximum height for content within a container. This maximum height does not include padding, border, and margin.
Elements applying the max-height property never become taller than the specified value, even if the height property is set to a larger value. For example, if the height property is set to 200px and max-height is set to 100px, the actual height of the element is 100px.
Example:
The output result appears as follows:
The max-height property is often used in conjunction with the min-height property to calculate the average height of related elements.
1.3. The min-height property
Use the min-height property to specify the minimum height for content within a container. This minimum height does not include padding, border, and margin.
Elements applying min-height never become smaller than the specified minimum height. For example, if height is set to 200px and min-height is set to 300px, the actual height of the element is 300px.
Example:
The output result appears as follows:
The min-height property is often used alongside the max-height property to calculate the average height of related elements.
1.4. The max-width property
The max-width property allows specifying the maximum width for content within a container. This maximum width does not include padding, border, and margin.
Elements applying the max-width property never become wider than the specified value, even if the width property is set to a larger value. For example, if the width property is set to 300px and max-width is set to 200px, the actual width of the element is 200px.
Example:
The output result appears as follows:
The max-width property is often used alongside the min-width property to calculate the average width of related elements.
1.5. The min-width property
Use the min-width property to specify the minimum width for content within a container. This minimum width does not include padding, border, and margin.
Elements applying min-width never become smaller than the specified minimum width. For example, if width is set to 300px and min-width is set to 400px, the actual width of the element is 400px.
Example:
The output result appears as follows:
On this lesson, Mytour has just introduced you to custom size properties in CSS. In the next lesson, Mytour will further introduce you to Scrollbars in CSS.
