Một số thuộc tính như chiều rộng, chiều cao, chiều cao tối đa, v.v. trong CSS cho phép người dùng kiểm soát kích thước của hộp nội dung phần tử.
Hãy xem một ví dụ cho thuộc tính CSS max-height -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS max-height</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
#containerDiv {
margin: 0 auto;
max-height: 150px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>CSS max-height</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/machine_learning_with_python/images/machine-learning-with-python-mini-logo.jpg">
</div>
</fieldset>
</form>
</body>
</html> Đầu ra
Trước khi chiều cao tối đa được xác định -
Sau khi chiều cao tối đa được xác định -
Hãy xem một ví dụ khác về thuộc tính chiều rộng tối thiểu CSS -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>CSS min-width Property</title>
</head>
<style>
* {
padding: 2px;
margin:5px;
}
button {
border-radius: 10px;
}
#containerDiv {
width:70%;
margin: 0 auto;
padding:20px;
background-image: linear-gradient(135deg, #dc3545 0%, #9599E2 100%);
text-align: center;
border-radius: 10px;
}
.contentDiv{
min-width:200px;
border: 1px solid black;
}
</style>
<body>
<div id="containerDiv">
<div class="contentDiv">
This is paragraph 1 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<div class="contentDiv">
This is paragraph 2 with some dummy text.
</div>
<button onclick="add()" class="btn">Set minWidth</button>
</div>
<script>
function add() {
document.querySelectorAll('.contentDiv')[1].style.minWidth = "100%";
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
Sau khi nhấp vào ‘Đặt chiều rộng tối thiểu’ nút -
