CSS/ריווח

< CSS

בשביל מה ואיך?עריכה

משתמשים בריווח כדי לסגנן את העיצוב. בעזרת הריווח ניתן יהיה לקבוע רווח בין האלמנט עצמו לאלמנט האב, או בין האלמנטים הילדים לאלמנט. לא מבינים? הנה הסבר:

מילות המפתח הן "margin" ו-"padding".

מה זה אומר? margin זה הרווח שבין האלמנט (כמו DIV לדוגמא), לאלמנט האב. padding זה הרווח שבתוך האלמנט: כמו מעין גבול בלתי נראה שמרחיק את הטקסטים והמדיות השונות מהגבול.

איך עושים זאת?

נסו את שורות הקוד הבאות:

<html>
<head>
<style type="text/css">
p 
{
background-color: #ffeecc;
margin: 50px 0px 0px 50px;
}
</style>
</head>

<body>
<p>margin</p>
</body>

</html>

(את background-color הבינו כרגע כרקע כצבע - נלמד בהמשך.).

נריצו את הקוד. מה אתם רואים? יש רווח בין הטקסט לבין גבול-הדף!

הפעם, נסו את השורות האלו:

<html>
<head>
<style type="text/css">
p 
{
background-color: #ffeecc;
padding: 50px 0px 0px 50px;
}
</style>
</head>

<body>
<p>padding</p>
</body>

</html>

בפעם הזו, יש ריווח בתוך האלמנט!

תחביר

כדי ליצור ריווח (margin/padding) יש להשתמש במילה זו - נקודתיים - פירוט.

בפירוט אנו רואים ארבעה מספרים - ניתן להשתמש בפחות, אך לא יותר - מכיוון שהמספר הראשון מסמל top, השני right, השלישי - bottom והרביעי- left.

סיכוםעריכה

בפרק זה למדנו כיצד ניתן ליצור ריווח - פנימי / חיצוני שמאפשר אלגנטיות בדף ויותר אפשרויות מזדמנות לעיצובים. margin - ריווח חיצוני. padding - ריווח פנימי.

דוגמאעריכה

<style type="text/css">
h1
{
padding: 20pt 20pt 20pt 20pt;
}
</style>

<h1> Hello </h1>

תוצאה והסברעריכה

בין הכותרת Hello לבין שאר הדברים במסמך HTML יהיה רווח של 20pt.


הפרק הקודם:
מיקום
ריווח הפרק הבא:
רקעים