לדלג לתוכן

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.


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