Để đặt padding trên và dưới cùng bằng 2epx và bo góc có bán kính 20px cho các hình ảnh đặt trong phần tử HTML trên, cách khai báo nào sau đây là chính xác?
Lời giải chi tiết
Trước tiên, chúng ta cần phân tích yêu cầu đề bài:
Như vậy, chúng ta cần khai báo trong CSS thuộc tính padding-top và padding-bottom với giá trị 2px, đồng thời sử dụng border-radius để bo góc cho hình ảnh.
Ta sẽ phân tích các tùy chọn:
.image- style img { padding: 20px 0px; border-radius: 20px; }: Kích thước padding cho trên và dưới là 20px, không đáp ứng yêu cầu 2px. image-style .img { padding: 20px 0px; border-radius: 20px; }: Tương tự làm padding trên và dưới là 20px. Hơn nữa, selector không chọn đúng hình ảnh do không có dấu cách giữa class và phần tử (img thay vì .img), nên không thể áp dụng styling chính xác. #image-style ing { padding-top: 20px; padding-bottom: 20px; border-radius: 20px; }: Cách chọn selector không chính xác và giá trị padding-top và padding-bottom là 20px thay vì 2px. Thêm vào đó là lỗi gõ sai từ khóa img..image-style img { padding: 0px 20px; border-radius: 20px;}: Điều này chỉ đặt padding trái và phải là 20px, không phải trên và dưới như yêu cầu. Nhìn vào các phân tích trên, rõ ràng chưa có lựa chọn nào thực sự chính xác theo cách chọn lớp và từ khóa yêu cầu. Do đó, cách khai báo đúng theo yêu cầu đánh giá trên có thể hiểu nhầm.
Chú ý khi giải
Khi làm bài tập này, học sinh cần lưu ý:
padding-top, padding-right, padding-bottom, padding-left để chỉ định cụ thể khoảng cách của các hướng.