מדריכים לבניית אתרים

נאמר שיש לנו קוד פסקה פשוט עם מלל:

<p>Text Text Text Text Text Text Text Text Text Text Text Text</p>

ואיתו אנחנו נעבוד ונקבע לו רוחב וגובה:

	p
	{
		border:1px solid black;
		width:80px;
		height:80px;
	}

בשורה הראשונה הגדרנו לנו מסגרת כדי לראות את הגובה והרוחב באופן מוחשי. הגדרנו כאן גובה (height) ורוחב (width) של 80 שניהם (ריבוע). אבל מה בגלל כל המלל שלנו התוכן גולש החוצה ופורץ למטה. לכן בדרך כלל לא נהוג להגביל את הגובה באזור תוכן רב למשל מאמר, או המדריך פה לא מוגבלים בגובה וכברירת המחדל הם על auto (אוטומטי).

רואים שהמלל גולש מחוץ להגדרות שלנו , אבל הוא יגלוש מטה ולא לצד. ערכים נוספים שאפשר להזין זה באחוזים, פיקסלים או כלום כאשר ברירת המחדל של כלום זה auto - הגודל יקבע אוטומטית לרוב ימרח לצד עד הסוף ואז יתחיל לרדת למטה.

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

	p
	{
		border:1px solid black;
		max-width:180px;
		max-height:180px;
	}

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

בתמונה רואים שלמרות שהגדרנו 180 פיקסלים לגובה התוצאה היא 60 פיקסלים גובה בלבד, זאת מכוון שהגדרנו את המספר 180 פיקסלים כמקסימום ולא כערך ודאי. העדיפות תמיד היא לניצול המקסימלי של הרוחב קודם כל ואז הגובה.