Chúng ta có thể định nghĩa chiều cao và chiều rộng độc lập cho nội dung của phần tử, tuy nhiên các thuộc tính này không bao gồm margin, padding hay border.
Cú pháp
Cú pháp của thuộc tính CSS height:
Selector { height: /*giá trị*/ }
Cú pháp của thuộc tính CSS width:
Selector { width: /*giá trị*/ }
Ví dụ về thuộc tính width và height:
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"> Đây là đoạn văn 1 với một số văn bản giả. </div> <div id="contentDiv2"> Đây là đoạn văn 2 với một số văn bản giả. </div> </div> <script> </script> </body> </html>
Kết quả
Ví dụ khác về width và height:
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>
Kết quả
