Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
Selected Reading
The width and height properties in CSS
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*/
}
Example
Let us see an example of width and height properties −
<!DOCTYPE html>
<html>
<head>
<title>CSS height and width</title>
<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>
</head>
<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>
</body>
</html>
Example
Let us see another example of width and height properties −
<!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>
Example
The height is set to auto in this example. In this case the web browser calculates the height automatically −
<!DOCTYPE html>
<html>
<head>
<title>HTML Document</title>
<style>
*,*::before,*::after{
box-sizing: border-box;
}
.pagePagination{
margin: 15px;
display: inline-block;
background-color: rgb(39, 39, 39);
overflow: auto;
height: auto;
}
.links {
display: inline-block;
text-align: center;
padding: 14px;
color: rgb(178, 137, 253);
text-decoration: none;
font-size: 17px;
}
.links:hover {
background-color: rgb(100, 100, 100);
}
.selected{
background-color: rgb(0, 18, 43);
}
</style>
</head>
<body>
<h1> Page pagination example </h1>
<div class="pagePagination">
<a class="links" href="#">«</a>
<a class="links selected" href="#">1</a>
<a class="links" href="#">2</a>
<a class="links" href="#">3</a>
<a class="links" href="#">4</a>
<a class="links" href="#">5</a>
<a class="links" href="#">»</a>
</div>
<h2>Hover on the above numbers to see effect</h2>
</body>
</html>
Updated on: 2024-01-02T16:40:47+05:30
147 Views
Advertisements