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.
| הפרק הקודם: מיקום |
ריווח | הפרק הבא: רקעים |