We can define the height and width exclusively for the element’s content, though these properties do not include margins, paddings or borders.
Syntax
The syntax of CSS height property is as follows −
Selector {
height: /*value*/
}The syntax of CSS width property is as follows −
Selector {
width: /*value*/
}Let us see an example of width and height properties −
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(62deg, #fbab7e 0%, #f7ce68 100%);
text-align: center;
border-radius: 10px;
}
#contentDiv2{
width:200px;
height: 200px;
opacity: .5;
border:1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div id="contentDiv1">
This is paragraph 1 with some dummy text.
</div>
<div id="contentDiv2">
This is paragraph 2 with some dummy text.
</div>
</div>
<script>
</script>
</body>
</html>Output
Let us see another example of width and height properties −
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 150px;
width:250px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS height and width</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html>Output
