28/09/2018, 23:12

Khác nhau giữa Padding và Margin

Sự khác nhau giữa padding và margin, Tính chất khi nào dùng padding khi nào dùng margin.

Xin chào mọi người!

Nhiều lập trình viên mới bước vào nghề thường khó phân biệt giữa hai thuộc tính trong CSS là Margin và Padding, vì chúng đều được hiểu nôm na là khoảng trống (không gian) giữa các phần tử. Tuy nhiên một khi chúng ta hiểu được chính xác tích chất của từng thuộc tính thì sẽ có được các giao diện web tốt hơn, nâng cao trải nghiệm người dùng.

 

 

Hiểu một cách đơn giản thì thuộc tính padding là khoảng trống nằm giữa nội dung và viền. 

Còn margin là khoảng trống nằm giữa viền và phần tử tiếp theo. Chúng ta cứ hiểu không gian tính từ viền tới các phần tử khác được gọi là margin. Cũng tương tự như padding thì margin cũng bao quanh 4 mặt và bạn có thể nhắm mục tiêu margin trên, dưới, trái, phải cho nó, nếu như padding là khoảng cách so với thẻ con thì margin là khoảng cách so với thẻ cha.

 

Để hiểu thêm về padding và margin mình có môt số vị dụ sau:

Giả sử mình có đoạn code HTML như sau: 

<div id = "hoc_code">
    <div id = "header">
    </div>
    <div id = "content" class = "content">
        <div class = "content_left">
            Content Left
        </div>
        <div class ="content_right">
        </div
    </div>
    <div id = "footer">
    </div
</div>

VD1: với đoạn css sau: bạn thử dự đoán xem khối class content_left có chiều rộng bao nhiêu?

 

.content{
  width:200px;
  height:200px;
  padding:10px;
  margin:10px;
  border: 1px solid red;
  
}
.content_left{
  width:100%;
  padding:5px;
  border: 1px solid red;
  
}

 

VD2: với đoạn css sau: bạn thử dự đoán xem khối class content_left có chiều rộng bao nhiêu?

 

#hoc_code{
  width:300px;
  position:relative;

}
.content{
  width:200px;
  height:200px;
  padding:10px;
  margin:10px;
  border: 1px solid red;
  
}
.content_left{
  width:100%;
  padding:5px 5px 5px;
  border: 1px solid red;
  position: absolute;
  margin:5px;
  
}
Bài liên quan

Khác nhau giữa Padding và Margin

Sự khác nhau giữa padding và margin, Tính chất khi nào dùng padding khi nào dùng margin.

Điệp Bắp viết 23:12 ngày 28/09/2018

Nghiên cứu : Sự khác nhau giữa Swift và Object-C ?

Hôm nay mình sẽ cùng các bạn nghiên cứu về Swift , Về Swift định nghĩa thì ở trên mạng cũng có rất nhiều , như "Swift là một ngôn ngữ lập trình mới dành cho các nhà phát triển ứng dụng dành cho iOS và OS X. Nhiều phần của Swift sẽ rất thân quen với những người đã có kinh nghiệm lập trình bằng C ...

Bùi Văn Nam viết 21:49 ngày 11/08/2018

Sự khác nhau giữa Buffers và Cached

1. Trả lời ngắn Cached là kích thước của page cache. Buffers là kích thước của in-memory block I/O buffers. 2. Trả lời dài: Cả Cached và Buffers đều có ý nghĩa là vùng lưu trữ tạm, nhưng mục đích sử dụng thì khác nhau, tổng quan thì có một số điểm sau: Mục đích của cached là ...

Tạ Quốc Bảo viết 21:14 ngày 11/08/2018

Tìm hiểu về sự khác nhau giữa eql? và equal? trong Ruby

Tìm hiểu về sự khác nhau giữa eql? và equal? trong Ruby Tiếp nối bài viết Bạn biết gì về toán tử "===" triple equals (case equality operator) trong Ruby? , ở bài viết này mình sẽ giải thích rõ hơn về sự khác nhau giữa eql? và equal? trong Ruby. Các bạn có thể đọc lại Bạn biết gì về toán ...

Trịnh Tiến Mạnh viết 21:12 ngày 11/08/2018

Sự khác nhau giữa Scala và Java 8 (Phần 1)

1. Scala - ngôn ngữ lập trình hàm (Functional Language) "write less, do more" Ví dụ , nhu cầu ứng dụng của bạn cần lựa chọn một số từ (string) thích hợp thỏa mãn tiêu chí điều kiện của bạn từ một danh sách các từ - List(). Để thực hiện logic này trong Java (7, 6), cú pháp sẽ có ...

Hoàng Hải Đăng viết 20:19 ngày 11/08/2018
+2