Home  >  Article  >  Web Front-end  >  What is Dimension in CSS? (code example)

What is Dimension in CSS? (code example)

青灯夜游
青灯夜游Original
2018-09-14 17:59:592637browse

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

What is Dimension in CSS? (code example)

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn