Chủ đề: Bí quyết tùy chỉnh kích thước trong CSS

Các thuộc tính tùy chỉnh kích thước trong CSS giúp bạn kiểm soát chiều cao và chiều rộng của các phần tử. Hãy tham gia ngay vào bài học CSS để hiểu rõ hơn về chủ đề này.

Khám phá chi tiết về Thuộc tính tùy chỉnh kích thước trong CSS

1. Bí quyết tùy chỉnh kích thước trong CSS

Bằng cách sử dụng các thuộc tính width, height, max-width và max-height, ... trong CSS, bạn có thể kiểm soát kích thước của phần tử một cách linh hoạt.

1.1. Sử dụng thuộc tính width và height trong CSS

Thuộc tính width và height quy định kích thước chiều rộng và chiều cao của vùng nội dung trong phần tử. Đối với chiều rộng và chiều cao này, không tính đến padding, đường viền (border), và lề (margin).

Các thuộc tính này có thể nhận giá trị theo đơn vị độ dài (px, pt, em, ...), tỷ lệ phần trăm (%) hoặc sử dụng từ khóa auto.

Lưu ý: Thuộc tính width và height không chấp nhận giá trị âm.

Ví dụ:

Kết quả cuối cùng sẽ hiển thị như sau:

1.2. Thuộc tính max-height

Thuộc tính max-height cho phép đặt giới hạn chiều cao tối đa cho nội dung trong khung. Giới hạn này không bao gồm padding, đường viền (border) và lề (margin).

Phần tử sử dụng thuộc tính max-height sẽ không bao giờ vượt quá giá trị được chỉ định, ngay cả khi giá trị của thuộc tính height được thiết lập lớn hơn. Ví dụ, nếu height được đặt là 200px và max-height là 100px, chiều cao thực tế của phần tử sẽ là 100px.

Một min-height đơn giản như sau:

Kết quả cuối cùng sẽ hiển thị như sau:

Thuộc tính max-height thường được kết hợp với min-height để xác định chiều cao trung bình của phần tử liên quan.

1.3. Thuộc tính min-height

Sử dụng thuộc tính min-height để xác định chiều cao tối thiểu cho nội dung trong khung. Chiều cao tối thiểu này không bao gồm padding, đường viền (border), và lề (margin).

Phần tử sử dụng min-height sẽ không bao giờ có chiều cao nhỏ hơn giá trị được xác định, ngay cả khi chiều cao (height) được đặt là 200px và min-height là 300px. Chiều cao thực tế của phần tử sẽ là 300px.

Một ví dụ cụ thể như sau:

Kết quả cuối cùng sẽ hiển thị như sau:

Thuộc tính min-height thường được kết hợp với thuộc tính max-height để tính chiều cao trung bình của phần tử liên quan.

1.4. Thuộc tính max-width

Thuộc tính max-width giúp xác định chiều rộng tối đa cho nội dung trong khung, không tính đến padding, đường viền (border), và lề (margin).

Khi phần tử áp dụng thuộc tính max-width, nó sẽ không bao giờ mở rộng ra ngoài giá trị đã đặt, ngay cả khi chiều rộng (width) của nó được thiết lập lớn hơn. Ví dụ, nếu width là 300px và max-width là 200px, chiều rộng thực tế của phần tử sẽ là 200px.

Ví dụ về việc sử dụng max-width:

Dưới đây là kết quả mà bạn có thể nhận được:

Thường thì thuộc tính max-width được áp dụng cùng với min-width để định rõ chiều rộng trung bình của phần tử liên quan.

1.5. Thuộc tính min-width

Sử dụng thuộc tính min-width để đặt giới hạn chiều rộng tối thiểu cho nội dung trong khung, không tính đến padding, đường viền (border), và lề (margin).

Phần tử áp dụng min-width sẽ không bao giờ thu hẹp dưới giới hạn được chỉ định, ngay cả khi chiều rộng (width) được thiết lập là 300px và min-width được đặt là 400px.

Ví dụ:

Kết quả sau cùng sẽ có dạng như sau:

Bài học này của Mytour đã giới thiệu về các thuộc tính tùy chỉnh kích thước trong CSS. Trong bài học sắp tới, Mytour sẽ tiếp tục chia sẻ kiến thức về Scrollbar trong CSS. Hãy cùng theo dõi nhé!