Làm cách nào để hiển thị đường viền thành div mà không chiếm bất kỳ khoảng trống thừa nào trong html?

Question

Tôi muốn vẽ đường viền cho div mà không chiếm bất kỳ khoảng trống thừa nào, nghĩa là đường viền phải nằm trong div.

Answer 1

Bạn có 3 lựa chọn:

1. Hộp bên trong và bên ngoài (như @xpapad đã nêu).
2. Sử dụng outline, ví dụ: outline:1px #000 solid;. Read more.
3. Sử dụng box-sizing, thuộc tính css3. Ví dụ: box-sizing:border-box;. Read more.

Answer 2

Bao gồm div bên trong bên trong div hiện tại của bạn, sử dụng đường viền được yêu cầu.

Answer 3

bạn có thể bù đắp bằng lề âm hoặc chỉ sử dụng đường viền.

div { border: 10px solid red; margin: -10px}; 

hoặc

div { outline: 10px solid red; } 

cách khác bạn có thể sử dụng css3 boxshadow để viền giả ...

dụ: http://jsfiddle.net/meo/K23s7/

Answer 4

Thử sử dụng lề âm tương đương với đường viền của bạn, ví dụ:

border-right:1px; 
margin-right:-1px;