Sau khi nghĩ dưỡng 2/9 hơn nữa tháng nằm qua 3 cái bệnh viện thì giờ mình quay lại đây. Hy vọng sắp tới sẽ chuyên cần hơn trong việc chém gió này keke.

Thôi vào việc luôn get go 😁

margin-inline: Nó sẽ tương ứng với việc các bạn viết margin-left và margin-right

Ví dụ luôn cho dễ đi vào lòng người nè: Bình thường mình muốn cho 1 block ra giữa mình có thể dùng margin-left:auto và margin-right: auto còn sau khi các bạn đọc đến đây rồi thì => margin-inline: auto thấy hịn hơn chưa 😁 margin-block: Tương tự nhưng khác chiều thôi nó sẽ tương ứng với top và bottom

Ví dụ luôn:  Thay vì các bạn viết margin-top: 20px và margin-right: 20px => margin-block: 20px cũng hịn hịn hơn xíu gòi đó 😁 Thì có margin thì cũng sẽ có padding thôi chứ chạy đi đâu nữa 😝 => padding-inline & padding-block aspect-ratio: là 1 thuộc tính giúp chúng ta hiển thị hình ảnh theo tỉ lệ (1:1, 16:9, 4:3).

<img src="link-img" alt="" />
.aspect {
  aspect-ratio: 1/1;
  // aspect-ratio: 16/9;
  // aspect-ratio: 4/3;
}
.aspect img {
  width: 100%;
  height: 100%;
  object-fix: cover;
}

Đa số trình duyệt đều hỗ trợ rồi tầm 80% trừ những trình duyệt cũ quá hoi (< safafi 14.8). Bạn có thể check trên trang caniuse.com nghen. inset thuộc tính này thường giúp mình viết thay cho trường hợp top: 0, right: 0, bottom: 0, left: 0 để phủ 1 lớp absolute full thằng cha relative luôn hoặc top: 0, left: 0, width: 100%, height: 100% cũng có tác dụng tương tự thì mình có thể viết gọn thành inset: 0 nó là viết tắt của inset: top right bottom left tương tự cách viết tắt của padding và margin thôi hehe

Hy vọng anh em đọc xong bài này có thể giúp anh em biết được vài thuộc tính mới trong css, áp dụng luôn vào dự án đang làm của mình cho quen tay nhé. Mình sẽ update bài này nếu có thêm cái mới nghen 🥰