Hai thuộc tính CSS đơn giản nhưng ảnh hưởng rất mạnh đến thẩm mỹ của trang là margin và padding. Nó quan trọng bởi vì bạn sẽ không thể tìm thấy bất kỳ trang web nào mà lại không có lề, không có đệm.
Lề và khoảng đệm chỉ là các khoảng trống, không có nó các thẻ sẽ dính liền vào nhau tạo ra không gian trông ngột ngạt và khó coi. Dưới đây là ví dụ về một đoạn HTML không có margin và padding:
Đây là văn bản minh họa, nó không có ý nghĩa gì đặc biệt và bạn không cần quan tâm đến nó.Bạn có thể thấy bức ảnh và văn bản minh họa không hề có khoảng cách nào, thêm vào đó cái hộp có viền màu xám và nội dung bên trong nó cũng không hề có khoảng đệm. Và rõ ràng nếu nó được sắp xếp như bên dưới thì sẽ dễ coi hơn rất nhiều:
Đây là văn bản minh họa, nó không có ý nghĩa gì đặc biệt và bạn không cần quan tâm đến nó.Chúng ta chỉ thêm vào những khoảng trống giữa các nội dung ngoài ra không thêm gì khác - nhưng khác biệt thật là lớn.
Dòng code tôi thêm vào rất đơn giản:
- padding: 7px
- margin: 10px
Margin là khoảng cách giữa thẻ đó và các thẻ bên cạnh khác, còn padding là khoảng cách từ nội dung của chính thẻ đó và đường viền của nó. Do vậy để tạo khoảng cách cho phần văn bản với bức ảnh, tôi viết:
img {margin-right:10px}
Tức là tôi báo với trình duyệt để lề bên phải của bức ảnh là 10px.
Còn với hộp có viền màu xám, vì ảnh và nội dung nằm trong hộp đó nên chúng ta dùng padding để làm khoảng đệm, câu lệnh cụ thể là:
div {padding:7px}
Còn với hộp có viền màu xám, vì ảnh và nội dung nằm trong hộp đó nên chúng ta dùng padding để làm khoảng đệm, câu lệnh cụ thể là:
div {padding:7px}
Dòng lệnh trên thông báo với trình duyệt rằng, hãy để nội dung trong hộp cách đường viền 7px.
Bốn phía của lề và khoảng đệm
Lề và khoảng đệm đều có 4 phía, khi chúng ta khai báo margin hoặc padding mà không có từ khóa nào thêm vào thì mặc định lề và khoảng đệm sẽ áp dụng cho cả 4 phía là trên, phải, dưới và trái. Ví dụ padding: 7px thì có nghĩa là khoảng đệm sẽ là 7px ở cả 4 phía.
Khi chúng ta thêm một từ khóa bao gồm: top, right, bottom, left (trên, phải, dưới, trái) nó sẽ được chỉ thị cụ thể lề hoặc khoảng đệm phía nào có khoảng cách là bao nhiêu. Chính trong ví dụ trên ta đã sử dụng margin-right để chỉ thị lề bên phải. Giờ nếu tôi muốn chỉ thị khoảng đệm ở phía dưới là 9px chẳng hạn, tôi sẽ phải dùng lệnh padding-bottom: 9px;
Cụ thể, tôi liệt kê đầy đủ tên và tác dụng của từng lệnh:
Cụ thể, tôi liệt kê đầy đủ tên và tác dụng của từng lệnh:
- margin-top: lề bên trên
- padding-top: đệm bên trên
- margin-right: lề bên phải
- padding-right: đệm bên phải
- margin-bottom: lề bên dưới
- padding-bottom: đệm bên dưới
- margin-left: lề bên trái
- padding-left: đệm bên trái
Viết tắt khi sử dụng margin và padding
Nếu bạn muốn quy định lề trên 7px, lề phải 6px, lề dưới 8px, lề trái 9px của ảnh thì một cách đầy đủ nhưng dài dòng bạn sẽ phải viết như thế này:
img {margin-top:7px; margin-right:6px; margin-bottom:8px; margin-left:9px;}
Nhưng CSS cho phép chúng ta viết tắt lại rất đơn giản mà vẫn cho kết quả tương đương:
img {margin: 7px 6px 8px 9px;}
Rõ ràng là ngắn hơn rất nhiều, nhưng chúng ta cần phải nhớ là không có dấu chấm phẩy nào giữa các giá trị - ngoài ra một điều rất quan trọng là theo thứ tự mặc định nó sẽ lấy giá trị đầu tiên áp dụng cho top, giá trị thứ hai cho right, thứ ba cho bottom và cuối cùng cho left. Để dễ nhớ bạn hãy nghĩ đến cách di chuyển của kim đồng hồ bắt đầu từ vị trí số 12.
Nếu bạn chỉ viết:
{margin: 12px 10px}
Thì bạn đang thiết lập cho top là 12px và right là 10px, các phần còn lại bị thiếu là bottom và left sẽ như nào? Nó không phải là 0px mà sẽ lấy đối xứng là giá trị, đối xứng với top là bottom, đối xứng với right là left. do vậy bottom có giá trị 12px, left là 10px.
Nói một cách khác thay vì viết:
{margin: 12px 10px 12px 10px}
Bạn chỉ phải viết:
Vấn đề gia tăng kích thước thẻ div khi sử dụng padding
Câu chuyện này tôi đã nói khá chi tiết trong bài mô hình hộp của CSS, nhưng nó rất quan trọng nên tôi vẫn nhắc lại...Khi bạn đặt padding cho thẻ div, kích thước của nó sẽ gia tăng, chẳng hạn, hộp div có chiều cao 200px, chiều rộng 300px, nếu bạn để padding là 10px thì chiều cao của div sẽ chuyển thành 220px, chiều rộng 320px.Thẻ div này không có padding, các chữ dính liền vào đường viền của hộp.
Thẻ div này có padding là 10px - do vậy mặc dù vẫn để width và height như cũ nhưng div này đã gia tăng kích cỡ mỗi chiều lên 20px (10px * 2)
Ngoài padding, một thuộc tính khác cũng làm gia tăng kích thước của thẻ div, đó là đường viền border.
