Lề và vùng đệm – Margin and padding

Trong bài học trước bạn đã được giới thiệu mô hình hộp,. Trong bài này, bạn sẽ học cách thay đổi các đặc tính các phần tử được bao quanh bởi các hộp bằng cách thay đổi các thông số của thuộc tính lề – margin và vùng đệm – padding.

  • Thiết lập thông số margin
  • Thiết lập thông số padding

Thiết lập thông số lề – margin

Một phần tử có 4 cạnh bao gồm: phải – right, trái – left, trên – top và đáy – bottom. Thuộc tính margin là khoảng cách từ cạnh (hoặc đường biên) của một tử này đến cạnh  (hoặc đường biên) một phần tử khác. Hãy xem hình minh họa bên dưới để được hình dung thêm.

Ở ví dụ đầu tiên, giả sử bạn muốn thiết lập margin cho một trang tài liệu, điều này có thể thực hiện bằng các gán các thông số margin vào <body>. như hình minh họa bên dưới.

Để được như vậy, code CSS sẽ được viết như sau:

body {
    margin-top: 100px;
    margin-right: 40px;
    margin-bottom: 10px;
    margin-left: 70px;
    }

Hoặc bạn viết CSS theo cách rút gọn để code nhìn đẹp hơn:

body { margin: 100px 40px 10px 70px; }

Xem ví dụ

Bạn có thể thực hiện tương tự cho hầu hết các phần tử khác. Ví dụ bạn có thể định nghĩa thông số lề – margin cho một đoạn văn bản được đánh dấu bằng thẻ <p>:

body {margin: 100px 40px 10px 70px;}
p { margin: 5px 50px 5px 50px;}

Tao vùng đệm  – padding cho một phần tử

Padding được hiểu như khoảng trống nằm giữa nội dung và border, nó không ảnh hưởng khoảng cách giữa hai phần tử như margin.

Bạn sẽ hình dung được điều này qua các ví dụ dưới đây. đầu tiên chúng ta sẽ có 2 tiêu đề có màu nền khác nhau:

h1 {
  background: yellow;
}

h2 {
  background: orange;
}

Bằng cách xác định thông số padding, bạn có thể kiểm soát khoảng trống xung quanh giữa chữ và đường biên của tiêu đề có độ rộng khác nhau mỗi cạnh:

h1 {
    background: yellow;
    padding: 20px 20px 20px 80px; /* trên 20px, phải 20px, đáy 20px, trái 80px */
   }

h2 {
     background: orange;
     padding-left:120px;  /* trên 0, phải 0, đáy 0, trái 120px */
   }

Xem ví dụ

Tổng kết

Bạn đang dần làm chủ cách kiểm soát mô hình hộp CSS. Trong bài kế tiếp, chúng ta sẽ học cách đổi màu các đường biên – border cũng như thay đổi các kiểu dáng của chúng.

Facebook Comments