თვისება margin

თვისება margin ადგენს ელემენტის გარე ველს. თვისების მნიშვნელობით შეიძლება იყოს ნებისმიერი ზომის ერთეული ან საკვანძო თვისება auto, რომელიც ბრაუზერს საშუალებას აძლევს დამოუკიდებლად გამოთვალოს ელემენტის ველი. ნაგულისხმევად, თითოეულ ბრაუზერს შეუძლია ელემენტებს დაამატოს სხვადასხვა ველი.

თვისება არის შემოკლება შემდეგი თვისებებისთვის: margin-top, margin-right, margin-bottom, margin-left.

სინტაქსი

სელექტორი {
	margin: მნიშვნელობა;
}

მნიშვნელობების რაოდენობა

თვისება margin იღებს 1, 2, 3 ან 4 მნიშვნელობას, რომლებიც ჩამოთვლილია სივრცით გამოყოფით:

რაოდენობა	აღწერა
`1`	ერთი მნიშვნელობა ადგენს ველს ელემენტის ყველა მხრიდან.
`2`	პირველი მნიშვნელობა ადგენს ველს ზემოდან და ქვემოდან, ხოლო მეორე - მარჯვნიდან და მარცხნიდან.
`3`	პირველი მნიშვნელობა ადგენს ველს ზემოდან, მეორე - მარჯვნიდან და მარცხნიდან, ხოლო მესამე - ქვემოდან.
`4`	პირველი მნიშვნელობა ადგენს ველს ზემოდან, მეორე - მარჯვნიდან, მესამე - ქვემოდან, ხოლო მეოთხე - მარცხნიდან.

მაგალითი

ახლა ჩვენ გვექნება ბლოკი ველების გარეშე:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 0;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

მაგალითი

ახლა კი ბლოკს დავაყენებთ ველს 10px-ზე:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

მაგალითი

დავაყენოთ ბლოკს ველი 10px-ზე ზემოდან და ქვემოდან და 20px - მარცხნიდან და მარჯვნიდან:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 10px 20px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

მაგალითი

დავაყენოთ ბლოკს ველი 5px-ზე ზემოდან, 15px-ზე მარჯვნიდან, 25px-ზე ქვემოდან და 35px-ზე მარცხნიდან:

<div id="parent">
	<div id="elem"></div>
</div>

#parent {
	border: 1px solid black;
	display: inline-block;
}
#elem {
	margin: 5px 15px 25px 35px;
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

იხილეთ აგრეთვე

თვისება padding,
რომელიც ადგენს შიდა ველს