CSS Width and Height

Published by StudyMuch on

StudyMuch CSS Width & Height

CSS width and Height with Programming Examples

In this tutorial we will learn the CSS width and height property to set and design the elements of HTML Web Pages and Documents. Here we learn all the valid properties to set the value and all definition with programming examples of all the properties.

CSS Width and Height

The Width and Height properties of CSS Set and defines the width and heigh of an element. Its value can be set by using length (px, pt, cm etc.), percentage or auto. These properties do not include border, padding and margin. It sets the height and width of the area inside the padding, border, and margin of an elements.

By default, these properties define the width or height of the content area or box.

The width and height attributes only set the area inside the padding, margin, and border of an element.

Valid Value to Set Width and Height.

  • <percentage>: It set the value with percentage.
  • <length>: It set value with length such as pt, cm, px etc.
  • max-content: It set the internal major width of an element.
  • min-content: It set the internal minimum width of an element.
  • auto: It selects and calculate the width and height of an element automatically.
  • fit-content: This value set the internal minimum width, the smaller of the internal major width and the available width of an element.
  • Initial: It set the value height or width to its default value of element.
  • Inherit: The height and width will be set inherited from its parent value.

Now we see all the programming example of above Valid Value only of CSS width, with output of programming, after we see the example height value with all valid value.

Example of CSS width with all valid value,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of Width Property</title>
    <style type="text/css">
        b{color: blue;}
    .length{width: 300px;
        background: lightsalmon;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .percentage{width: 80%;
        background: lightgrey;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .auto{width: auto;
        background: lightgreen;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .max-content{width:max-content;
        background: lightpink;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .min-content{width:min-content;
        background: lightblue;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .fit-content{width:fit-content;
        background:lightyellow;
        padding: 10px;
        margin: auto;
        border: 1px solid red;}
    .inherit{width:inherit;
        background: lightsalmon;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    </style>
</head>
<body>
<div class="length">Learn CSS with 
<b>StudyMuch.</b> (This is Example of <b>'lenght'
 value</b>.) </div><br>
<div class="percentage">Learn CSS with 
<b>StudyMuch.</b>(This is Example of 
<b>'percentage' value</b>.) </div><br>
<div class="auto">Learn CSS with 
<b>StudyMuch.</b>(This is Example of 
<b>'auto' value</b>.) </div> <br>
<div class="max-content">Learn CSS with
 <b>StudyMuch.</b>(This is Example of
 <b>'max-content' value</b>.) </div><br>
<div class="min-content">Learn CSS with
 <b>StudyMuch.</b>(This is Example of
 <b>'min-content' value</b>.) </div><br>
<div class="fit-content">Learn CSS with
 <b>StudyMuch.</b>(This is Example of
 <b>'fit-content' value</b>.) </div><br>
<div class="inherit">Learn CSS with 
<b>StudyMuch.</b>(This is Example of
 <b>'inherit' value</b>.) </div><br>
</body>
</html>

Output of above programming example,

Above you can see the output of programming all the box is different size.

Here we see all the valid value programming example of CSS Height with programming’s output, so you are undressing easily.

Example of CSS Height with all Valid Value

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of CSS Height Property</title>
    <style type="text/css">
        b{color: blue;}
    .length{height: 100px;
        background: lightsalmon;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .percentage{height: 30%;
        background: lightgrey;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .auto{height: auto;
        background: lightgreen;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .max-content{height:max-content;
        background: lightpink;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .min-content{height:min-content;
        background: lightblue;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    .fit-content{height:fit-content;
        background:lightyellow;
        padding: 10px;
        margin: auto;
        border: 1px solid red;}
    .inherit{height:inherit;
        background: lightsalmon;
        padding: 10px;
        margin: auto;
        border: 1px solid green;}
    </style>
</head>
<body>
<div class="length">Learn CSS with 
<b>StudyMuch.</b>(This is Example of 
<b>'lenght' value</b>.) </div> <br>
<div class="percentage">Learn CSS with
 <b>StudyMuch.</b>(This is Example of 
<b>'percentage' value</b>.) </div> <br>
<div class="auto">Learn CSS with
 <b>StudyMuch.</b>(This is Example of 
<b>'auto' value</b>.) </div> <br>
<div class="max-content">Learn CSS with
 <b>StudyMuch.</b>(This is Example of
 <b>'max-content' value</b>.) </div><br>
<div class="min-content">Learn CSS with
 <b>StudyMuch.</b>(This is Example of 
<b>'min-content' value</b>.) </div><br>
<div class="fit-content">Learn CSS with 
<b>StudyMuch.</b>(This is Example of 
<b>'fit-content' value</b>.) </div><br>
<div class="inherit">Learn CSS with 
<b>StudyMuch.</b>(This is Example of
 <b>'inherit' value</b>.) </div><br>
</body>
</html>

Output of above programming example.

Above you can see the output of programming only length and percentage value are different size and other all value is same box size. And you see the output of width value all the box size is different.

Minimum Width and Height

The maximum width and height value can be specified the width and height value such as px, cm, pt etc. or in percentage (%) to set the maximum value of an element. It set the value only maximum.

The following properties define CSS maximum width and height.

  • max-height: This property is used to set the maximum height of an element.
  • max-width: This property is used to set the maximum width of an element.

Valid Value to set height and width.

  • <percentage>
  • <length>

And all the value is given above to set the maximum height and width of an element.

Example of max-height and max-width,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of max-width & max-height</title>
    <style type="text/css">
        b{color: blue;}
    .max-width{max-width: 200px;
        background: lightsalmon;
        border: 1px solid green;}
    .max-height{max-height: 200px;
        background: lightgrey;
        border: 1px solid green;}
    </style>
</head>
<body>
<div
class="max-width">Learn CSS with <b>StudyMuch.</b>
 (This is Example of <b>max-width</b>.) </div><br>
<div
class="max-height">Learn CSS with <b>StudyMuch.</b>
 (This is Example of <b>max-height</b>.) </div> <br>
</body>
</html>

Output of above programming example

Minimum Width and Height

The minimum value can be specified the width and height value of an element with minimum utility. It set the value with length like pt, px, cm etc., and percentage (%) to set height and width value of an elements.

The following properties define the CSS minimum height and width of an element.

  • min-height: This property is defined to set the minimum height of an elements.
  • min-width: This property is used to set the minimum width of an elements.

Valid value to set width and height

  • <percentage>
  • <length>

And all the valid value id given above to set width and height of an element.

Example of min-height and min-width,

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of min-width & min-height</title>
    <style type="text/css">
        b{color: blue;}
    .min-width{min-width: 200px;
        background: lightgreen;
        border: 1px solid green;}
    .min-height{min-height:  100px;
        background: lightskyblue;
        border: 1px solid green;}
    </style>
</head>
<body>
<div
class="min-width">Learn CSS with <b>StudyMuch.</b>
(This is Example of <b>min-width</b>.) </div> <br>
<div class="min-height">Learn CSS with 
<b>StudyMuch.</b>(This is Example of 
<b>min-height</b>.) </div><br>
</body>
</html>

Output of above programming output

Above output of programming example, you can see the min-height and min-width. Here min-height is increase but the min-width is not increase.

In this tutorial we learned all the definition of CSS width and height and see all the programming example with output, I hope you all understood this tutorial of CSS Width and Height. In next tutorial of CSS, we learn a new and interesting topic.

Read Also-

 

Categories: Uncategorized
Tags:

0 Comments

Leave a Reply

Avatar placeholder

Your email address will not be published. Required fields are marked *

Related Posts

Interview Questions and Answers for Freshers

Interview Questions and Answers for Freshers

Top 45 IT Interview Questions and Answers for Freshers Going through a job interview, especially as a Freshers IT graduate, can be challenging. However, with right preparation and a clear understanding of common interview questions Read more…

Python Sets

Python Sets

Understanding Python Sets Python, a versatile and powerful programming language, offers a wide range of data structures that make it a favourite among developers. Set is a fundamental data structure used for storing collections of Read more…

Best Programming Language for Developing AI

Best Programming Language for Developing AI

Best Programming Language for Developing AI (Artificial Intelligence) Artificial Intelligence (AI) is changing the way we interact with technology and the world around us. From self-driving cars to virtual personal assistants, AI is powering innovations Read more…