Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #a{ border:1px solid black; height:200px; } #b{ background-color:pink; background-clip:content-box; border:10px solid blue; padding:50px; height:20%; } </style> </head> <body> <div id="a"> <div id="b">LẬP TRÌNH WEB</div> </div> <p>- Chiều cao của phần tử #b phía trên sẽ là 160px, bởi vì:</p> <ul> <li>Đường viền phía trên 10px</li> <li>Đường viền phía dưới 10px</li> <li>Vùng đệm trên 50px</li> <li>Vùng đệm dưới 50px</li> <li>Chiều cao phần nội dung 40px (bởi vì 20% của 200px sẽ là 40px)</li> </ul> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #a{ border:1px solid black; height:200px; } #b{ background-color:pink; background-clip:content-box; border:10px solid blue; padding:50px; height:20%; } </style> </head> <body> <div id="a"> <div id="b">LẬP TRÌNH WEB</div> </div> <p>- Chiều cao của phần tử #b phía trên sẽ là 160px, bởi vì:</p> <ul> <li>Đường viền phía trên 10px</li> <li>Đường viền phía dưới 10px</li> <li>Vùng đệm trên 50px</li> <li>Vùng đệm dưới 50px</li> <li>Chiều cao phần nội dung 40px (bởi vì 20% của 200px sẽ là 40px)</li> </ul> </body> </html>