CSS'те бир нече wrapper'лер менен макеттердин схемасы

Өнүктүрүүдө көп кездешкен макеттер, анда блоктор бүтүндөй барактын туурасы боюнча фонго ээ, ал эми блоктордун мазмуну борбордо турат. Мына ушундай макеттин мисалы:

Мына ушундай макетте биз бир эмес, бир нече wrapper түзүшүбүз керек болот - ар бир блок үчүн. Бул учурда wrapper'дин ичинде дагы бир блок болушу керек, ал мазмунду борборлоо милдетин аткарат. Ошондой эле мазмунду фон менен боёого жооптуу класс болушу керек.

Биздин макеттин жалпы схемасы төмөнкүдөй болот:

<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>

center класы блокторду борборлоо үчүн колдонулат:

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

line класы блокторду боёо үчүн колдонулат:

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

wrapper класы ар бир блоктун ата-энеси болот. Биз аны блоктордун ортосундагы кендик берүү үчүн колдонобуз:

.wrapper {
	margin-bottom: 30px;
}

Келгиле, азыр биздин маселебиздин толук кодун жазалы:

<div class="wrapper">
	<div class="center">
		<h1>Негизги сайттын баштыгы</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Биздин компания</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Биздин баа</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Биздин байланыштар</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;
}