Độ lớn thực sự của Box

• October 9, 2008
• 26 comments

Khi thiết kế giao diện nhiều cột sử dụng CSS thì độ lớn của các box rất quan trọng và chúng chịu ảnh hưởng rất lớn đến nhau. Nếu một box này bị phình to ra hơn kích thước bạn muốn, nó có thể đẩy box bên cạnh di chuyển sang hướng khác và hậu quả là cả giao diện của bạn sẽ không theo ý muốn. Cho nên để nắm rõ được cách mà CSS tác động đến độ lớn của box sẽ giúp bạn có cái nhìn rõ ràng hơn về sự ảnh hưởng lẫn nhau giữa các thành phần. Và đây cũng là một trong những điều gây phiền toái nhất của CSS.

Ví dụ bạn tạo một đoạn văn bản với độ rộng width: 250px và cho hiển thị màu nền là màu vàng nhạt cho dễ nhìn.

Đoạn văn có độ rộng là 250px và màu vàng

Bây giờ ta sẽ thêm padding vào để cho phần chữ không bị chạm vào viền. Ở phần này tôi sẽ cho giá trị padding là 10px vào bên tay trái và phải của nội dung. Như đã nói trong phần padding, giá trị padding sẽ đẩy nội dung vào trong đường biên. Nhưng trong thực tế nó lại làm độ rộng của phần này tăng lên tổng cộng là 20px

Đoạn văn có độ rộng là 250px và màu vàng

Bây giờ nếu bạn thêm border trái và phải với giá trị là 5px mỗi bên

Đoạn văn có độ rộng là 250px và màu vàng

Khi thêm border vào, nó cũng sẽ làm tăng toàn bộ độ lớn của cả phần. Bây giờ box ban đầu đã có độ lớn là 280px.

Cuối cùng nếu bạn thêm Margin là 30 px vào mỗi bên trái phải nữa thì toàn bộ phần này sẽ chiếm một khoảng cách lớn hơn nhiều so với giá trị 250px lúc ban đầu. Nếu bạn nghĩ khi thêm padding và border vào box sẽ không làm tăng kích thước của box, nhưng trong thực tế lại cho thấy điều ngược lại.

Đoạn văn có độ rộng là 250px và màu vàng

Hiểu được vấn đề này là chìa khoá chủ chốt để sau này chúng ta sẽ học cách tạo dựng giao diện nhiều cột bằng CSS. Khi bạn phải làm việc với giao diện có nhiều thành phần tương tác lẫn nhau, một trong số đó thay đổi độ lớn ngoài ý muốn sẽ có tác động đến những thành phần khác. Do vậy chỉ cần một phần nào đó hiển thị sai ý bạn, có thể cả giao diện sẽ không được như ý nữa. Chính vì thế người ta hay tạo một thẻ <div> lớn với độ rộng của giao diện họ muốn sau đó thì tạo các thẻ <div> khác nằm trong nó. Bằng cách này bạn có thể duy trì được độ lớn mà bạn muốn mà không sợ bị các thành phần khác làm thay đổi.

Trong ví dụ dưới đây tôi đặt độ lớn của đoạn văn bản sau là 250 px và nằm trong một thẻ div bao quanh

<div id="wrapper">
  <div id="box_model">
  <h3>Box Model</h3>
  <p>Tạo thẻ div bao quanh là cách để bạn quản lý độ rộng thực
sự của box. cho dù khi tôi thêm giá trị padding bằng 5px vào
mỗi bên trái phải, nó cũng không làm tăng độ lớn. Mà ngược lại,
nó sẽ bị đầy lùi vào biên là 5px .</p>
  </div><!--End #box_model-->
</div><!--End #wrapper-->

Bây giờ bạn hãy đặt độ lớn của thẻ div có id=”box_model” là 250px chứ không phải id=”wrapper”

h3 {background:#eee;}
#wrapper {width: 250px;background-color:#EEE;}
#box_model {padding: 0 5px;}

Bạn sẽ thấy nội dung bị đẩy lùi vào trong với giá trị là 5px thay vì bị phình to ra như ở trên. Thậm chí bạn có thể thêm đường viền vào và nó cũng vẫn giữ nguyên được giá trị ban đầu.

#box_model {padding: 0 5px;border: 10px solid black;}

Bằng cách tạo một thẻ <div> bao quanh, bạn đã có thể quản lý được độ rộng thực sự của box và không sợ nó thay đổi mỗi khi bạn thêm các thành phần như padding, margin hoặc border nữa. Ở những bài kế tiếp trong phần thiết kế giao diện, tôi sẽ sử dụng kỹ thuật này rất nhiều. Do vậy bạn hãy hiểu kỹ phần này trước khi tiếp tục sang phần sau.

Bài học rút ra được ở bài này là khi bạn tạo giao diện bằng CSS và bạn thiết lập độ lớn cho một thành phần bất kỳ. Bạn thực chất là phải thiết lập độ lớn cho nội dung nằm trong nó. Bất cứ giá trị padding, margin hay border được thêm vào sẽ làm cho nó phình ra và chiếm một khoảng không lớn hơn giá trị ban đầu.