آشنایی با مفهوم Margin , Padding , Border در CSS

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیاتMargin , Padding Border و محتوا یا Content است


امیر سروری ۱۷ دیدگاه CSS , اصول طراحی وب سایت شنبه, ۲۷ام فروردین , ۱۳۹۰ 24788 بازدید

تمامی عناصر HTML را میتوان به صورت یک چهار ضلعی یا جعبه ( Box ) در نظر گرفت . برای ایجاد ساختار مناسب در طراحی یک وب سایت این Box ها در کنار یکدیگر قرار خواهند گرفت . مفهوم Box Model در CSS به بررسی خصوصیات و توانایی های این اجزاء ( Box ) می پردازد .

مفهوم یک Box در CSS نشان دهنده محیط اطراف یک عنصر HTML است که دارای خصوصیات Margin , Padding ,Border و محتوا یا Content است .
مفهوم Box Model این توانایی را به ما میدهد تا فاصله محتویات ( Content ) تا خط محیطی ( Border ) را تعیین کنیم ( Padding ) ، ضخامت خط مرز ( Border ) را تعیین کنیم و یا فاصله خارجی یک عنصر HTML را با دیگر عناصر تعیین کنیم ( Margin ) میتوانید در طرح زیر این مفهوم را دقیقتر درک کنید .

آموزش Css , padding , margin , border

Margin

فضای خالی در خارج از محیط Box و مرز Border ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . این فضا دارای رنگ پس زمینه نیست وبه صورت یک فضا با پس زمینه شفاف یا Transparent در فضای اطراف Box قرار میگیرد .

div {
	margin:10px;
	}
    
div {
	margin-left:10px;
	margin-top:10px;
	margin-right:5px;
	margin-bottom:3px;	
	}

Border

مشخص کننده مرز خارجی Box خارج از محتوا ( Content ) و ( Padding ) که میتوان میزان ضخامت و رنگ و نوع آن را تعیین نمود .به صورت پیش فرض رنگ آن از رنگ زمینه Box پیروی میکند .

div {
	border:1px solid #888;
	}
div {
	border-bottom:2px solid #070;
	border-left:2px double #070;
	border-top:2px dashed #070;
	border-right:2px dotted #070;
	}

Padding

فضای خالی مابین محتوا و مرز ( Border ) داخلی Box ، که میتوان اندازه آن را برای ضلع های مختلف ( Top , Right , Bottom ,Left ) به صورت کلی و یا جزء به جزء تعیین نمود . رنگ پس زمینه این فضا از رنگ پس زمینه Box پیروی میکند .

div {
	padding:15px;
	}
div {
	padding-left:5px;
	padding-top:20px;
	padding-right:8px;
	padding-bottom:7px;	
	}

Content

محتویات داخای یک Box ، که میتواند شامل متن ، تصویر ، لیست و یا جدول و … باشد .

نحوه محاسبه اندازه یک Box

برای طراحی و چینش دقیق اجزاء در طراحی یک صفحه وب ، تمامی اجزاء جزء به جزء با دقت ۱px محاسب میشوند و با توجه به این موضوع نحوه محاسبه اندازه ( Width , Height ) در یک Box بسیار مهم است .
با استفاده از خصوصیات width , height اندازه اجزاء ( Box ) تعیین میگردند ، اما به این نکته توجه کنید که ، در صورت وجود ( Border , Margin , Padding ) فضایی که Box اشغال خواهد کرد با اندازه ای که توسط خصوصیات Width و height تعیین شده است متفاوت خواهد بود . در واقع با استفاده از width و height تنها اندازه محتوا ( Content ) تعیین شده است و برای محاسبه اندازه واقعی Box ، اندازه ( Padding , Margin , Border ) نیز باید به این اندازه اضافه شوند .
این نکته مهم را به یاد داشته باشید که ، Padding و Border در اندازه یک Box – Width or Height تاثیر گزار هستند ، این اندازه با استفاده از فرمول زیر محاسبه می شود

آموزش Css , padding , margin , border

width = width + left padding + right padding + left border + right border + left margin + right margin

آموزش Css , padding , margin , border

height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin



نویسنده / مترجم : امیر سروری

امیر سروری هستم علاقه مند به بازاریابی و تبلیغات آنلاین , طراحی وب سایت و البته آموزش


۱۷ دیدگاه برای این نوشته ثبت شده است


  1. بهار
    ۱۸ خرداد ۱۳۹۰


  2. jimmyheller
    ۱۴ شهریور ۱۳۹۰

    در بالا فلش ها درست کشیده شده اند ولی اندازه ای که با فرمول محاسبه می شود margin هم در آن حساب میشود و نکته دیگر اینکه w3c در css تعریف width , height را به این صورت مطرح میکند که تنها content را حساب می کند ولی این روش، روش محاسبه width و height در IE را تعریف می کند. کمی این قسمت گیجم کرد توضیح بدید لطفا.:)




    • امیر سروری
      ۱۴ شهریور ۱۳۹۰

      jimmyheller @ این روش ارتباط خاصی با IE نداره و در تمام مرورگرها نحوه محاسبه اندازه واقعی هر box که در صفحه قرار میگیره ( فضایی که اشغال میکنه ) به همراه اندازه padding , margin , border محاسبه خواهد شد . مقدارهایی که به وسیله height , width در css برای هر box تعریف میشوند مشخص کننده محدوده content هستند که در شکل به صورت کامل مشخص شده است . بنابراین برای بدست آوردن اندازه واقعی Box در صفحه باید اندازه padding , margin , border رو هم به این اندازه ( content ) اضافه کرد .




  3. jimmyheller
    ۱۴ شهریور ۱۳۹۰

    @امیر
    http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
    به نظر اون چیزی که من میگفتم فقط وقتی اتفاق می افته که در حالت quirk mode هست . مرسی بابت توضحیتون اون قسمت رو متوجه شدم.




  4. علی اکبر
    ۱۰ مهر ۱۳۹۰

    سلام،
    ممنون هم لذت بردم هم استفاده کردم.




  5. من
    ۹ آبان ۱۳۹۰

    توضیحات کاملا واضح و ساده و پر کاربرد هستند

    من حتما شما رو لینک می کنم




  6. نیلوفر اسدی
    ۱۳ اسفند ۱۳۹۰

    خیلی خوب بود , مرسی




  7. سجاد نجفی
    ۱۳ اسفند ۱۳۹۰

    ایول ایول است ایول !! :) ;)




  8. reza
    ۸ خرداد ۱۳۹۱

    ممنون خیلی توضیحات خوبی بود.میشه مطالب جدید در مورد برنامه نویسی و سی اس اس و… رو واسم ایمیل کنید.مرسی




    • امیر سروری
      ۹ خرداد ۱۳۹۱

      reza @ رضا جان کافیه در خبرنامه وب سایت عضو بشید تا مطالب جدید براتون ایمیل بشه . در قسمت بالای ساید بار سمت چپ . موفق باشید




  9. (SirAhmad(padroni
    ۴ آذر ۱۳۹۱

    توضیح بیشتر اینکه به عنوان مثال وقتی شما کد CSS زیر رو مینویسی:

     body { width: 900px;} 

    در واقع شما فقط اندازه محتوای تگ body رو تعیین می کنی و عرض واقعی با اضافه کردن اندازه ی padding, margin, border به دست میاد.




  10. mt20
    ۲۰ مرداد ۱۳۹۲

    good ! … Good




  11. علی
    ۱۳ مرداد ۱۳۹۳

    سلام خسته نباشید یه سوال داشتم میخواستم بدونم اگه مثلا بخوام مقداذ margin-top رو واسه IE مقدار متفاوتی ست کنم چی کار باید بکنم ممنوم میشم راهنمایی کنید




  12. bahar
    ۷ مهر ۱۳۹۳

    ساده ومفید بود مرسی




  13. محمد حسین
    ۲۸ فروردین ۱۳۹۴

    سلام
    واااااااااااااااااااااااقعا ممنون
    خیلی خلاصه و مفید نوشته شده بود.
    تمام توضیحات رو هم به صورت کامل اومده بود
    ممنون




  14. sajjadcr7
    ۱۴ خرداد ۱۳۹۴

    ممنونم ایولا عالی بود




  15. حامد
    ۱۴ خرداد ۱۳۹۵

    احسنت و من الله و من التوفیق
    چی گفتم :D
    اصلا بازی کرذن با این کدها یه لذتی داره تو css



دیدگاه خود را بنویسید





نشانی ایمیل شما منتشر نخواهد شد.

کامنت های شما بعد از تأیید توسط نویسنده وبلاگ، منتشر خواهند شد.

لطفا دیدگاهتان تا حد امکان مربوط به پست بالا باشد. اگر حرف دیگری دارید و یا قصد تماس با من را دارید، از فرم تماس استفاده کنید.

شما میتوانید با مراجعه به سایت گراواتار یک آواتار اختصاصی برای خود تعریف کنید، تا در کنار نام شما نمایش داده شود

برای قرار دادن کدهای نمونه می توانید از تگ های [php] ، [html] ، [css] و [js] استفاده کنید.
به عنوان مثال کدهای php را می توان به صورت زیر قرار داد:
[php] var $whoLoveIranians = "WebTarget!"; [/php]



کلیه حقوق مادی و معنوی برای وب سایت وب تارگت محفوظ است ©2017 وب‌تارگت

استفاده از مطالب وب سایت در سایر وب سایت‌ها و نشریات چاپی با ذکر منبع آزاد است.