Học Css cơ bản – Thuộc tính Margin và Padding

Bài này thuộc phần 7 nằm trong tổng 7 phần của serie Học CSS cơ bản

Trong css thuộc tính margin và padding đóng vai trò rất quan trọng, ừ thì các bạn có thể thấy tất cả các câu văn mở đầu của tôi trong serie học html và css tôi đều nói là rất quan trọng…Nhưng đúng thật margin và padding đóng vai trò cực qua trọng trong css. Còn về nó quan trọng ra sao và quan trọn thế nào thì chúng ta sẽ cùng nhau đi vào từng phần nhé.

Thuộc tính Margin

Margin hay còn gọi là thuộc tính lề trong css. Các thuộc tính lề ( margin ) dùng để thiết lập các khoảng không gian trắng bên ngoài các border. Thông thường thuộc tính này rất hay xuất hiện trong 1 website, nó giúp cho bố cũ website được dồn vào một khoảng trông rất khoa học. Để các bạn dễ hình dung tôi sẽ sử dụng margin cho một đoạn code nh nhỏ sau đồng thời tôi sẽ không sử dụng margin như vậy bạn sẽ dễ dàng hiều được khoảng cách nó thụt bào sẽ như thế nào.

thuoc-tinh-margin

Nhìn ảnh trên các bạn có thể thấy khi sử dụng margin thì đoạn văn bản bị thụt vào một đoạn và căn chỉnh giúp nó tách biệt không còn áp sát vào gần đoạn văn bản thứ nhất.

Nếu như bạn đã đọc qua bài thuộc tính border thì chắc hảng bạn đã hiểu cách dùng đúng không nào ? Xét ở margin cũng có 4 thuộc tính chứa các giá trị giúp bạn căn lề cho nó được dễ dàng hơn.

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

4 thuộc tính này giúp bạn căn chỉnh lề từ 4 hướng khác nhau, thông thường thuộc tính margin sẽ nhận một số giá trị sau : auto, px, pt, %, cm

Ví dụmargin-top: 10px; bạn chỉ việc thay giá trị 10px bằng giá trị bạn mong muốn thì trình duyệt sẽ tự điều chỉnh giùm bạn.

Thuộc tính margin Shorthand

Đây là thuật ngữ chỉ sự rút gọn câu lệnh, thông thường khi khai báo theo khuôn mẫu này trình duyệt cũng sẽ tự hiểu , bạn không cần phải khai báo liên tục mấy câu lệnh trên dẫn đến file css nặng hơn.

Cú phápmargin: giá trị 1 giá trị 2 giá trị 3 giá trị 4

Chú ý: mỗi một giá trị khai báo được ngăn cách nhau bằng 1 dấu cách, kiểu như margin: 10px 5px 6px 7px;

Quy ước: nếu như bạn khai báo đủ 4 thuộc tính margin thì:

  1. giá trị 1 : Căn lề trên
  2. giá trị 2 : Căn lề phải
  3. giá trị 3 : Căn lề dưới
  4. giá trị 4 : Căn lề trái

Nếu như bạn khai báo chỉ có 3 giá trị thì :

  1. giá trị 1 : Căn lề trên
  2. giá trị 2 : Căn lề trái và lề phải
  3. giá trị 3 : Căn lề dưới

Nếu như bạn khai báo chỉ có 2 giá trị thì :

  1. giá trị 1 : Căn lề trên + lề dưới
  2. giá trị 2 : Căn lề trái + lề phải

Nếu bạn khai báo thuộc tính margin có duy nhất 1 giá trị thì  đồng nghĩa vớ việc bạn đang sét cho cả 4 lề.

Khi bạn khai báo giá trị của margin là auto có nghĩa là nó sẽ tự điều chỉnh lề trái và lề phải ra giữa, nhưng lê trên và lê dưới không được nhận giá trị.

Thuộc tính padding

Thuộc tính này dùng để tạo khoảng cách giữa nội dung và border xog quanh, nghĩa là nó giúp dãn và tăng kích thước độ rộng của khung nội dung. Về cách sử dụng thì nó thừa hưởng những giá trị giống hệt thuộc tính margin chỉ khác mỗi câu lệnh khởi tạo padding:giá trị;

Bạn có thể nhìn hình ảnh này để thấy được chức năng chính của nó trong một tài liệu website:

thuoc-tinh-padding

Nhấn mạnh: Do padding thừa hưởng mọi giá trị của margin lên mình sẽ không viết lại những thuộc tính đó nữa, bạn chỉ việc thay chữ margin thành padding để sử dụng các giá trị cốt lõi đó.

Lời kết:

Ở bài này chắc hẳn các bạn đã biết sử dụng thêm cú pháp về 2 thuộc tính margin và padding rồi đúng không, hẹn gặp lại các bạn ở bài tiếm theo trong serie nhé.

Bài viết khác cùng serie

Bảo Nguyễn

Đam mê dòng nhạc Bolero, thích con gái công sở và thích bàn luận quân sự.

Leave a Reply

Be the First to Comment!

Notify of
avatar
wpDiscuz

Create Account



Log In Your Account