Chúng tôi có thể xác định chiều cao và chiều rộng dành riêng cho nội dung của phần tử, mặc dù các thuộc tính này không bao gồm lề, khoảng đệm hoặc đường viền.
Cú pháp
Cú pháp của thuộc tính CSS height như sau -
Selector {
height: /*value*/
} Cú pháp của thuộc tính chiều rộng CSS như sau -
Selector {
width: /*value*/
} Hãy để chúng tôi xem một ví dụ về các thuộc tính chiều rộng và chiều cao -
Ví dụ
<!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> Đầu ra
Hãy để chúng tôi xem một ví dụ khác về thuộc tính chiều rộng và chiều cao -
Ví dụ
<!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> Đầu ra
