body { /* Xóa hết khoảng đệm bên trong của body (dù mặc định thường là 0, nhưng viết rõ để chắc chắn). */ padding: 0; /* Xóa hết khoảng trống mặc định bên ngoài của thẻ . (Thông thường các trình duyệt tự động thêm một khoảng margin 8px xung quanh body). */ margin: 0; } .container { max-width: 1000px; /* 100% để xem khoảng hở margin và padding của body */ margin: 0 auto; /* canh giữa trang: margin-left: auto; và margin-right: auto; sẽ cân bằng khoảng trống hai bên, giúp phần tử được canh giữa ngang trong vùng chứa. */ } .container>header { padding: 5px; background-color: red; background-image: url("../images/heaher_bg.jpg"); background-size: cover; /* cover: ảnh sẽ phủ đầy vùng chứa, có thể bị cắt bớt nếu tỉ lệ ảnh không đúng với vùng chứa */ height: 0px; /* Chiều cao phần tử ban đầu bằng 0. Nhưng… nó sẽ được “đẩy lên” nhờ padding-bottom */ padding-bottom: 25%; /* chiều cao = 25% chiều rộng của header */ } .container>nav { padding: 1px; /*background-color: blue;*/ line-height: 50px; /* chiều cao dòng, giúp canh giữa chữ trong thẻ nav: căn giữa chữ theo chiều dọc (rất tiện khi chỉ có một dòng text). */ } .container>article { padding: 5px; /*background-color: green;*/ width: 750px; min-height: 250px; float: left; /* thả nổi bên trái và cho phép phần tử nằm cạnh nhau ngang hàng (không bị đẩy xuống dòng dưới) */ } .container>aside { padding: 5px; /*background-color: cyan;*/ width: 230px; min-height: 250px; float: right; /* thả nổi bên trái và cho phép phần tử nằm cạnh nhau ngang hàng (không bị đẩy xuống dòng dưới) */ } .container>aside>h3 { text-align: center; background-color: orange; color: white; padding: 10px; margin-top: 10px; } .container>footer { padding: 5px; background-color: orange; clear: both; /* xóa bỏ hiệu ứng float, giúp footer không bị kéo lên nằm cạnh article và aside */ height: 50px; border-top: 5px double orangered; color: white; text-align: center; }