What is Dimension in CSS? (code example)

This chapter will introduce to youWhat is Dimension in CSS? (Code example) . It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Introduction

The CSS Dimension property allows you to control the height and width of an element. Likewise, it allows you to increase line spacing.

2. Dimension (size) attribute value

3. Example

(1) Example 1: Set the height of different elements

img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}

(2) Example 2: Use the percentage value to set the height of the element

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}

(3) Example 3: Use pixel values ​​to set the width of the element

img {width:200px;}

(4) Example 4: Set the maximum height of the element

p{
    max-height:50px;
    background-color:yellow;
}

(5) Example 5: Use percentage values ​​to set The maximum width of an element

p{
    max-width:20%;
    background-color:yellow;
}

(6) Example 6: Set the minimum height of an element

p{
    min-height:100px;
    background-color:yellow;
}

(7) Example 7: Set the minimum width of an element with a pixel value

p{
    min-width:150px;
    background-color:yellow;
}

The above is the detailed content of What is Dimension in CSS? (code example). For more information, please follow other related articles on the PHP Chinese website!