Hộp nội dung là hộp trong cùng nơi đặt nội dung văn bản hoặc hình ảnh. Theo mặc định, kích thước của nó thường được đặt bằng kích thước của nội dung mà nó chứa. Nó cũng là hộp duy nhất trong mô hình hộp có giá trị thường không bằng 0 theo mặc định (nếu nó chứa nội dung); ngược lại, phần đệm, đường viền và lề của một phần tử được mặc định bằng 0 đối với nhiều phần tử HTML (chẳng hạn như phần tử,
Tiếp theo, hãy tăng kích thước phần đệm để nghiên cứu cách nó thay đổi cách hiển thị của phần tử
. Thêm dòng được đánh dấu sau vào luật CSS trong file styles.css của bạn để đặt padding thành 25 pixel:
styles.css
.yellow-div { background-color:yellow; width: 500px; padding:25px; }Lưu file styles.css và reload index.html trong trình duyệt của bạn. Kích thước của hộp màu vàng phải được mở rộng để cho phép khoảng trống 25 pixel giữa nội dung văn bản và chu vi của hộp:
Bạn có thể thay đổi kích thước của phần đệm bằng cách điều chỉnh kích thước giá trị của phần đệm. Bạn cũng có thể thay đổi kích thước phần đệm của các mặt cụ thể của phần tử bằng cách sử dụng các thuộc tính sau: padding-left , padding-right , padding-top , padding-bottom . Ví dụ: hãy thử thay thế khai báo padding:25px; trong file styles.css của bạn với đoạn mã được đánh dấu bên dưới:
styles.css
.yellow-div { background-color:yellow; width: 500px; padding-left:25px; padding-right: 50px; padding-top: 100px; padding-bottom: 25px; }Lưu file styles.css và tải index.html trong trình duyệt của bạn. Bạn sẽ nhận được thông tin như thế này:
Biết cách chỉ định kích thước phần đệm cho các cạnh riêng lẻ của một phần tử có thể hữu ích khi sắp xếp nội dung trên trang web.
Điều chỉnh kích thước đường viền, màu sắc và kiểu của một phần tử HTML bằng CSS
Bây giờ ta hãy thực hành cài đặt các giá trị cho đường viền của một phần tử HTML. Thuộc tính biên giới cho phép bạn cài đặt kích thước, màu sắc, và phong cách (chẳng hạn như solid , dashed , dotted , inset , và outset ) của một phần tử HTML. Ba giá trị này được đặt bằng cách gán chúng cho thuộc tính border như sau:
selector { border: size style color; }Hãy thử thêm phần khai báo được đánh dấu sau đây để thêm đường viền đen liền mạch rộng năm pixel:
styles.css
.yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; }(Bạn có thể cần xóa các khai báo padding khác nhau của bạn từ phần hướng dẫn trước và thay thế chúng bằng khai báo padding:25px; để giữ cho bộ luật có thể quản lý được). Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng của bạn bây giờ sẽ có đường viền với các giá trị bạn đặt trong luật CSS:
Bạn có thể thử thay đổi các giá trị để nghiên cứu cách chúng thay đổi cách hiển thị của phần tử trong trình duyệt. Giống như với padding, bạn cũng có thể chỉ định cạnh đường viền mà bạn muốn điều chỉnh bằng các thuộc tính border-right , border-left , border-top , border-bottom .
Điều chỉnh kích thước lề của một phần tử HTML bằng CSS
Tiếp theo, hãy thử điều chỉnh kích thước của lề của một phần tử bằng CSS. Trong bài tập này, ta sẽ cung cấp cho các lề một giá trị rất lớn để có thể dễ dàng xem kích thước lề được hiển thị như thế nào trong trình duyệt. Thêm khai báo được đánh dấu sau vào bộ luật của bạn trong file styles.css để đặt lề thành 100 pixel:
styles.css
.yellow-div { background-color:yellow; width: 500px; padding: 25px; border: 5px solid black; margin:100px; }Lưu file styles.css và reload index.html trong trình duyệt của bạn để kiểm tra các thay đổi. Hộp màu vàng phải di chuyển 100 pixel xuống dưới và 100 pixel sang bên phải để cho phép 100 pixel không gian lề giữa đường viền của nó và các cạnh của khung nhìn:
Lưu ý : Bạn có thể nhận thấy rằng hộp màu vàng ban đầu có một khoảng trắng nhỏ lề giữa phía trên và bên trái của nó và các cạnh của khung nhìn. Lề này được tạo tự động bởi một số trình duyệt để tạo khoảng trống giữa các cạnh của khung nhìn và nội dung trang web. Bạn có thể loại bỏ lề này bằng cách đặt lề trên và lề trái bằng 0.
Giống như phần đệm và đường viền, kích thước của các cạnh cụ thể của lề có thể được đặt bằng cách sử dụng margin-left , margin-right , margin-top và margin-bottom .
Trước khi tiếp tục, hãy thêm một containers
vào trang để nghiên cứu cách lề ảnh hưởng đến vị trí của nội dung lân cận. Không xóa bất kỳ thứ gì, hãy thêm bộ luật CSS bổ sung vào file styles.css của bạn:
styles.css
. . . .blue-div { height:100px; width:100px; background-color: blue; }Lưu file và quay lại index.html của bạn. Không xóa bất kỳ thứ gì, hãy thêm phần tử
vào file của bạn và gán cho nó lớp blue-div :
index.html
Lưu index.html của bạn và tải nó trong trình duyệt. Bạn sẽ nhận được thông tin như thế này:
Bây giờ, trình duyệt sẽ hiển thị một hộp màu xanh lam, rộng 100 pixel và cao 1000 pixel. Hộp màu xanh lam này phải thấp hơn hộp màu vàng 100 pixel tính theo lề của hộp màu vàng. Nói chung, theo mặc định, các phần tử xung quanh sẽ bị đẩy ra khỏi một phần tử do biên của nó. Tuy nhiên, hãy lưu ý lề của các phần tử liền kề thường sẽ chồng lên nhau do sự sụp đổ của lề. Kích thước của lề chồng chéo được xác định bằng kích thước của lề lớn nhất giữa hai phần tử.
Kết luận
Trong hướng dẫn này, bạn đã học về mô hình hộp CSS và cách điều chỉnh kích thước của từng thuộc tính nội dung, phần đệm, đường viền và lề của nó. Hiểu hoạt động của các thuộc tính này và cách đặt giá trị cho chúng rất hữu ích khi tổ chức và tạo kiểu nội dung trên trang web. Những kiến thức này sẽ hữu ích khi xây dựng trang web trình diễn trong các bài hướng dẫn còn lại. Trong hướng dẫn tiếp theo, bạn sẽ cài đặt một index.html để làm trang chủ của trang web.