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