Sơ đồ bố cục với nhiều wrapper trong CSS

Khi phát triển, chúng ta thường gặp các bố cục mà trong đó các khối có nền trải rộng toàn bộ chiều rộng trang, còn nội dung của các khối đó thì được căn giữa. Đây là một ví dụ về bố cục như vậy:

Trong bố cục như vậy, chúng ta sẽ phải tạo không chỉ một wrapper, mà nhiều wrapper - cho từng khối. Trong wrapper đó phải có một khối khác, thực hiện việc căn giữa nội dung. Cũng cần có một lớp chịu trách nhiệm tô màu nền cho nội dung.

Sơ đồ chung của bố cục chúng ta sẽ trông như sau:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

Lớp center sẽ được sử dụng để căn giữa các khối:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

Lớp line sẽ được sử dụng để tô màu các khối:

.wrapper.line {
	background-color: #008040;
	color: white;
}

Còn lớp wrapper sẽ là phần tử cha của mỗi khối. Chúng ta sử dụng nó để đặt khoảng cách giữa các khối:

.wrapper {
	margin-bottom: 30px;
}

Bây giờ hãy viết mã đầy đủ cho nhiệm vụ của chúng ta:

<div class="wrapper">
	<div class="center">
		<h1>Tiêu đề chính của trang</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Công ty của chúng tôi</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Giá của chúng tôi</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Liên hệ của chúng tôi</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}