Sublime Text
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ border:3px solid #00ff00; width:400px; height:200px; padding:20px; overflow:hidden; } </style> </head> <body> <div id="test"> <p>- SUMO, chú mèo bé bỏng của tôi . . . .</p> <img src="../image/sumo.jpg" style="width:280px"> </div> <p style="line-height:30px;font-size:18px;">- <u>GIẢI THÍCH</u>: Đúng ra là tấm hình sẽ tràn ra khỏi phần tử. Tuy nhiên, do chúng ta thiết lập thuộc tính overflow với giá trị hidden, nên tấm hình chỉ tràn tới <b>vùng đệm</b> mà thôi, phần nội dung bị tràn tới đường viền hoặc ra khỏi phần tử đều đã bị ẩn.</p> </body> </html>
<!DOCTYPE html> <html> <head> <title>Xem ví dụ</title> <style type="text/css"> #test{ border:3px solid #00ff00; width:400px; height:200px; padding:20px; overflow:hidden; } </style> </head> <body> <div id="test"> <p>- SUMO, chú mèo bé bỏng của tôi . . . .</p> <img src="../image/sumo.jpg" style="width:280px"> </div> <p style="line-height:30px;font-size:18px;">- <u>GIẢI THÍCH</u>: Đúng ra là tấm hình sẽ tràn ra khỏi phần tử. Tuy nhiên, do chúng ta thiết lập thuộc tính overflow với giá trị hidden, nên tấm hình chỉ tràn tới <b>vùng đệm</b> mà thôi, phần nội dung bị tràn tới đường viền hoặc ra khỏi phần tử đều đã bị ẩn.</p> </body> </html>