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

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


امیر سروری 18 دیدگاه CSS , اصول طراحی وب سایت Saturday, 16th April , 2011 50637 بازدید

تمامی عناصر 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

برای طراحی و چینش دقیق اجزاء در طراحی یک صفحه وب ، تمامی اجزاء جزء به جزء با دقت 1px محاسب میشوند و با توجه به این موضوع نحوه محاسبه اندازه ( 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



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

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


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


  1. بهار
    8 June 2011


  2. jimmyheller
    5 September 2011

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




    • امیر سروری
      5 September 2011

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




  3. jimmyheller
    5 September 2011

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




  4. علی اکبر
    2 October 2011

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




  5. من
    31 October 2011

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

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




  6. نیلوفر اسدی
    3 March 2012

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




  7. سجاد نجفی
    3 March 2012

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




  8. reza
    28 May 2012

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



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




  9. (SirAhmad(padroni
    24 November 2012

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

     body { width: 900px;} 

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




  10. mt20
    11 August 2013

    good ! … Good




  11. علی
    4 August 2014

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




  12. bahar
    29 September 2014

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




  13. محمد حسین
    17 April 2015

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




  14. sajjadcr7
    4 June 2015

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




  15. حامد
    3 June 2016

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




  16. سعید کسایی
    21 December 2017

    بسیار عالی.



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





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

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

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

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

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



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

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