CSS Dimension Properties

Posted By : Vikas Pundir | 27-Apr-2018
What is the CSS Dimension Properties?
To control the width and height of an element using CSS dimension properties.In The CSS Dimension Properties several properties are used such as max-height,max-width, height and width etc. now you can control the dimension of a box using these properties. How to create a better web page layout using these properties following section will describe you.
 
 
Width and height Properties  
The width and height of the content area of an element are defined by width and height property. In This Property borders, margins, or paddings does not include. How the effective width and height Properties is calculated, Check the CSS box model.
 
This property can take values of a percentage, a length, or the keyword auto. If the length values are Negative so it will be not allowed in code.
 
HTML:

<body>
<div>How these Properties work with the values</div>
</body>
 
CSS:

div {
width: 200px;
height: 200px;
background: #EEE8AA;
}
 
In this example assigns a fixed height of 200px and width of 200px in  to the HTML <div> element.
 
Here is max-height Property
Using max-height property we specify the maximum content height of a box into style CSS. This specify height is considered the actual height of the element. In This Property borders, margins, or paddings also does not include.
 
If the height property is set to something larger as compared to an element that has max-height applied will never be taller than the specified value. For example, if the max-height set to 100px and height is set to 200px of a div, so 100px height is actual height of the element.
 
HTML:

<div>The maximum height of this div element is set to 200px, so it can't be taller than that.</div>
    <p>Add some more line of text to see how it works.</p>  
 
CSS:

div {
height: 300px;
max-height: 200px;
background: #FFC0CB;
}
p {
max-height: 200px;
background: #F0E68C;
}   
 
We used the max-height property to produce a height range for the element concerned in conjunction with the min-height property.
 
 
The min-height Property
In min-height property, we specify the minimum content height of a block into style CSS. This minimum specifies height is considered the actual height of the element. In min-height Property borders, margins, or paddings also does not include.
 
If the height property is set to minimum as compared to an element that has min-height applied, will never be smaller than the minimum height specified. For example, if the min-height set to 300px and height is set to 200px of a div, so 300px height is actual height of the element.
 
HTML:

<div>The minimum height of this div element is set to 400px, so it can't be smaller than that.</div>
    <p>Add some more line of text to see how it works.</p> 
 
CSS:

div {        
height: 200px;
min-height: 400px;
background: #FFC0CB;
}
p {
min-height: 100px;
background: #F0E68C;
}
 
Basically, the min-height property to produce a height range for the element concerned in conjunction with the max-height property.
 
 
The max-width Property
The max-width property is used to specify the maximum width of a block. In maximum width property paddings, borders, or margins does not include.
 
A max-width is applied on an element will never be wider than the specified value in Style CSS.  even this width is set larger. For example, if the max-width is set to 200px and the width is set to 300px, so 200px width will be actual width of the element.
 
HTML:

<div>The maximum width of this div element is set to 300px, so it can't be wider than that.</div>
   <p>Add some text to see how it works.</p>
 
CSS:

div {
width: 300px;
max-width: 300px;
background: #FFC0CB;
}
p {
float: left;
max-width: 400px;
background: #F0E68C;
}
 
The max-width property is used to produce a width range for the element concerned in conjunction with the min-width property.
 
 
The min-width Property
The min-width property is used to specify the minimum width of a block. In minimum width property paddings, borders, or margins does not include.
 
A min-width is applied on an element will never be narrower than the minimum width specified value in Style CSS. For example, if the min-width is set to 400px and the width is set to 300px, so 400px width will be actual width of the element.
 
HTML:

<div>The minimum width of this div element is set to 400px, so it can't be wider than that.</div>
   <p>Add some text to see how it works.</p>
 
CSS:

div {
width: 300px;
min-width: 400px;
background: #FFC0CB;
}     
p {
float: left;
min-width: 400px;
background: #F0E68C;
}
 
The min-width property is used to produce a width range for the element concerned in conjunction with the max-width property.

About Author

Author Image
Vikas Pundir

Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.

Request for Proposal

Name is required

Comment is required

Sending message..