Tìm hiểu chi tiết về Spacing trong CSS

884

Bài viết được sự cho phép của tác giả Trần Anh Tuấn

Khi các bạn code giao diện cho một dự án nào đó chẳng hạn, các bạn sẽ thấy rằng để làm khoảng cách giữa các phần tử thì sẽ có nhiều cách như margin hoặc padding hay gọi chung là spacing. Tuy nhiên mình thấy nhiều bạn mới học thì hay bị rối giữa việc dùng 2 thứ này, hôm nay mình lại tiếp tục research tìm nội dung về nó để viết cho các bạn, hi vọng sẽ giúp ích được cho các bạn phần nào trong việc cải thiện kiến thức hơn, thông suốt hơn về spacing để có thể làm chủ việc code tốt hơn.

  5 điều phiền toái nhất của CSS
  9 CSS animation mới "mãn nhãn" cho các project

Các loại spacing

Như mình đã nói ở trên thì trong CSS có 2 loại spacing đó chính là outer-space và inner-space mà chúng ta hay gặp. Trong bài viết này mình gọi tạm là outer và inner cho dễ hiểu nhé. Ví dụ như hình dưới đây khoảng trống bên ngoài là outer và bên trong là inner.

Tìm hiểu chi tiết về Spacing trong CSS

Ví dụ ở trên có class là element đi thì chúng ta có thể có CSS đơn giản như này với inner là padding và outer là margin. Đơn giản đúng không nào ?

.element {
    padding: 20px;
    margin-bottom: 20px;
}
.element:not(:last-child) {
    margin-bottom: 80px;
}
.parent {
  margin: 50px auto 0 auto;
  width: 400px;
  height: 120px;
}

.child {
  margin: 50px 0;
}

Báo cáo bài viết vi phạm bản quyền>>