css ბლოკები (div)

<div id="parent" >
		<div class="children">
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		</div>
		<div class="children">
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		<p>ეს საიტის ტექსტია...</p>
		</div>
		</div>

#parent {
		width: 600px;
		height:400px;
		margin: 0 auto;
		padding: 10px;
		border: 5px dotted #000;
		background: #FF00AE;
		}
		.children{
		width: 200px;
		height:150px;
		margin: 10px 50px;
		padding-left: 15px;
		padding-top: 10px;
		border: 2px solid #544BFF;
		border-radius: 20px;
		background: #33FF0F;
		}

ახლა განვიხილოთ, თუ როგორ მივაღწიეთ ამ შედეგს; ჩვენ პირველ რიგში მშობელ ბლოკს განვუსაზღვრეთ სიგანე (width) და სიმაღლე (height), ასევე უკანა ფონი  (background) თვალსაჩინოებისათვის. ასევე შემოვავლეთ ჩარჩო (border). ამის შემდეგ margin-ის საშუალებით ის განვათავსეთ საიტის შუაში და ბოლოს padding-ის საშუალებით მისი შვილობილი ბლოკები ნაპირიდან მოვაშორეთ 10 პიქსელით. თუმცა რეალურად ისინი მარცხნიდან 60 და ზემოდან 20 პიქსელიდ დაშორდა (ამ საკითხს შემდეგ გაკვეთილზე განვიხილავთ).

რაც შეეხება შვილობილ ბლოკებს მათ სრულიად ერთნაირი სტილები აქვთ კლასის საშუალებით. განსხვავებით მშობელი ბლოკისაგან მათ დამატებით მომრგვალებული უწყვეტი ჩარჩო აქვთ. ჩარჩოს განსხვავებული სტილების შესახებ შეგიძლიათ გაიგოთ შესანიშნავ საიტზე http://ruseller.com/shporacss.php?id=42 მაგ: dashed -ტირე, double - ორმაგი ხაზით.

ალბათ შეამჩნიეთ, რომ მიუხედავად მცირე ზომებისა, შვილობილი ბლოკები ერთმანეთის ქვეშ განლაგდა და არა ერთმანეთის გვერდით. ეს ბლოკების ერთერთი მთავარი თვისებაა: მათთვის ბრაუზერში სივრცე საიტის მთელ სიგანეზე გამოიყოფა და იქ სხვა ბლოკი ვერ განლაგდება. (შემდეგ გაკვეთილებზე მათი გადალახვის გზებს შევისწავლით).