آموزش برنامه نویسی وب و مهارتهای مرتبط

شنبه ۲۲ شهریور ۱۴۰۴

Saturday, September 13, 2025 GMT +3:30

کار با ویژگی margin و padding در CSS

در ادامه آموزش های مقدماتی CSS این بار می خواهیم به مبحث کار با ویژگی های margin و padding بپردازیم، استفاده از این دو ویژگی (property یا خاصیت) در طراحی صفحات وب از جمله در هنگام تعریف فاصله چهارگوشه قالب از لبه های صفحه نمایش، فاصله عناصر درونی صفحه از هم یا تعیین میزان فضای خالی (حاشیه داخلی) بلاک های دربرگیرنده محتوا مانند متن، تصویر، ویدئو و... جهت نمایش بهتر و ایجاد جلوه ظاهری سفارشی امری متداول و فراگیر است، ویژگی های margin و padding زیرمجموعه هایی دارند که بسته به شرایط ممکن است به تعدادی از آنها در تعریف استایل مورد نظر نیاز داشته باشیم، در ادامه نحوه کار با ویژگی margin و padding در CSS را با مثال توضیح خواهیم داد.

ویژگی margin در CSS

همانطور که از معنی عبارت margin (حاشیه، لبه) مشخص است این ویژگی برای تنظیم فاصله ی گوشه های قالب از لبه صفحه نمایش یا عناصر داخلی صفحه وب از هم استفاده می شود، به فرض اگر بخواهیم بلاک div اصلی از کناره ها به میزان چند پیکسل فاصله داشته باشد کافی است برای آن بلاک مقادیر margin را در به میزان مشخصی در یک کلاس (Class) یا آی دی (ID) تعریف کنیم، به طور مثال:

<style>
#main-block {
    margin: 4px;
}
</style>
.
.
<body>
<div id="main-block"></div>
</body>

به این صورت بلاک div با کلاس فرضی main-block از تگ والد خود که می تواند به فرض تگ body باشد به میزان 4 پیکسل فاصله می گیرد، مقادیر مربوط به اندازه حاشیه را می توان به چند صورت زیر تعیین کرد اما متداول ترین شیوه در حالت معمول تعیین مقادیر به پیکسل (px) یا درصد است.
روش های تعریف مقدار برای ویژگی margin:
- تعیین مقادیر به پیکسل (Pixel یا Picture Element)، به فرض 4px، 3px، 0 و...، پیکسل واحد ثابتی است و هر صفحه نمایش (مانیتور، لپ تاپ، دستگاه تلفن همراه و..) وسعت خاصی از پیکسل را در عرض و ارتفاع شامل می شود.
- تعیین مقادیر به Point، به فرض 2pt، 6pt و... (هر pt برابر 1/72 اینچ است)، از واحد pt بیشتر برای کارهای چاپی استفاده می شود.
- تعیین مقادیر به Em (مخفف کلمه خاصی نیست و احتمالا تلفظ حرف M لاتین باشد)، به فرض 1em، 0.5em و... (هر em برابر با 16 پیکسل و 12 pt است)، به دلیل قابلیت غیر ثابت و مقیاس پذیر (Scalable) این واحد در طراحی صفحات وب برای گوشی های تلفن همراه و دستگاه های مانند آن عمدتا در تعیین اندازه فونت (Font Size) ممکن است استفاده شود.
- تعیین مقادیر به سانتی متر (Centimeter)، به فرض 5cm ، 10cm و...، استفاده از این شیوه در وب چندان مرسوم نیست.
- تعیین مقادیر به درصد (Percent)، به فرض %10 ، %50 و...، در این حالت اندازه بلاک با توجه به اندازه صفحه نمایش مقادیری متغیر خواهد بود، این واحد در طراحی صفحات وب به صورت واکنش گرا (Responsive) برای سازگاری با طیف وسیعی از صفحه نمایش ها از جمله گوشی های تلفن همراه و دستگاه های مانند آن مناسب است و در کنار پیکسل جزء پرکاربردترین ها محسوب می شود.
- تعیین مقادیر به صورت خودکار (auto، حالت پیش فرض) و وراثتی (inherit) از بلاک والد که میزان حاشیه به صورت پیش فرض یا به صورت ارث بری از بلاک والد و سطح بالاتر تعیین می شود.

نحوه تعریف ویژگی margin

ویژگی margin را می توانیم به دو صورت عادی و مختصر تعریف کنیم، در شیوه عادی برای کل جهت های بالا، راست، پائین و چپ به صورت یکجا حاشیه تعریف می شود، به طور مثال:

.main-block {
    margin: auto;
}

مثال بالا به این معنی است که مرورگر مقادیر پیش فرض مد نظرش را برای حاشیه در جهت های بالا، راست، پائین و چپ بلاک در نظر می گیرد.
خاصیت margin در چهار جهت اصلی ویژگی های زیرمجموعه تحت عنوان margin-top، margin-right، margin-left، margin-bottom دارد، بر همین اساس کد بالا مترادف با حالت زیر است:

.main-block {
    margin-top: auto;    
    margin-right: auto;
    margin-bottom: auto;
    margin-left: auto;
}

شاید بگوئیم در شرایطی که می توانیم با یک حالت منظورمان را به مرورگر تفهیم کنیم چرا از زیرمجموعه ها استفاده کنیم؟
پاسخ این است که در حالت کلی هر مقداری داشته باشیم الزاما به چهار جهت سرایت می کند و اگر بخواهیم به فرض یک جهت میزان حاشیه متفاوتی داشته باشد راه حل آن استفاده از ویژگی های زیرمجموعه margin است، یک مثال:

.main-block {
    margin: auto;
    margin-bottom: 10%;
}

بر این مبنا سه جهت بالا، راست و چپ مقادیر auto و جهت پائین 10 درصد حاشیه می گیرند.

مختصر نویسی ویژگی margin

ویژگی margin را می توانیم به صورت مختصر و خطی نیز بنویسیم، در حالت مختصر نویسی به جای تعریف کلی یا تعریف ویژگی های زیرمجموعه در جهت های بالا، راست، پائین و چپ، با نوشتن مقادیر margin در یک خط به همان هدف اما با میزان کدنویسی کمتر دست پیدا می کنیم، به طور مثال:

.main-block {
    margin: 2px 3px 1px 5px;    
}

اعداد در کلاس فوق به ترتیب نشانگر میزان حاشیه جهت بالا (top) راست (right) پائین (bottom) و چپ (left) عنصر هستند، در واقع این مثال برابر است با استایل CSS زیر:

<style>
.main-block {
    margin-top: 2px;    
    margin-right: 3px;
    margin-bottom: 1px;
    margin-left: 5px;
}
</style>
<div class="main-block"></div>

و همین طور مختصر نویسی به صورت زیر:

.main-block {
    margin: 10px 15px 20px;
}

برابر است با این کلاس CSS:

.main-block {
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 20px;
    margin-left: 15px;
}

و همچنین:

.main-block {
    margin: 10px 15px;
}

برابر است با:

.main-block{
    margin-top: 10px;
    margin-right: 15px;
    margin-bottom: 10px;
    margin-left: 15px;
}

در شیوه مختصرنویسی با تعداد پارامتر کمتر از 4، جهت های بالا - پائین و چپ - راست با هم ارتباط مقداری دارند.
نکته: برای بررسی و مشاهده پیش نمایش آنلاین لطفا به انتهای این آموزش مراجعه کنید.

ویژگی padding در CSS

از ویژگی padding در CSS جهت تعیین میزان حاشیه ی درونی عناصر صفحه استفاده می کنیم، به عبارتی padding فاصله محتوای یک بلاک از لبه های داخلی آن را مشخص می کند، به فرض اگر بخواهیم مطالب درونی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد کافیست برای استایل یا کلاس مربوط به آن لایه یک مقدار padding در نظر بگیریم، به طور مثال:

<style>
.main-block {
    padding: 4px;
}
</style>
.
.
<body>
<div class="main-block">محتوای بلاک</div>
</body>

آنچه در مورد ویژگی margin گفتیم در مورد padding نیز قابل اعمال است، به طور مثال برای تعریف مقادیر جهت های بالا، راست، پائین و چپ به صورت زیر padding را مقداردهی می کنیم:

.main-block {
    padding-top: 4px;
    padding-right: 10px;    
    padding-bottom: 6px;
    padding-left: 8px;
}

و در شیوه مختصر نویسی:

.main-block {
    padding: 4px 10px 6px 8px;
}

که مقادیر در کلاس فوق به ترتیب نشانگر جهت بالا (top)، راست (right)، پائین (bottom) و چپ (left) هستند.
نکته: در حالت پیش فرض میزان حاشیه داخلی (padding) به ارتفاع (height) و عرض (width) موجود بلاک اضافه می شود، برای تغییر این حالت و عدم احتساب padding به ارتفاع و عرض می توانیم از خاصیت box-sizing با مقادیر border-box استفاده کنیم:

.main-block {
    height: 50px;
    width: 200px;
    padding: 4px 10px 6px 8px;
    box-sizing: border-box;
}

مقادیر پیش فرض برای خاصیت box-sizing به صورت content-box است که در این حالت میزان padding و border به ارتفاع و عرض اضافه می شوند که باید به این نکته در طراحی قالب و فرمت بندی کارها دقت داشته باشیم.

مثال و پیش نمایش آنلاین

جهت آشنایی بیشتر با ویژگی های margin و padding در CSS کد و پیش نمایش آنلاین آن را در ادامه درج و بررسی می کنیم.

<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ایجاد حاشیه و نمایش محتوا در CSS</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    margin: 0px;
    padding: 0px;
    background-color: #333;
    color: #CCC;
    padding: 4px;
}
#parent-block {
    display: block;
    background-color: #999;
    height: 400px;
    width: 400px;
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    padding: 10px;
    border: 4px solid #FFF;
}
.child-block {
    display: block;
    text-align: justify;
    color: #333;
    background-color: #CCF;
    height: 380px;
    width: 380px;
    margin: 10px;
    padding: 10px;
    border: 4px solid #666;
    box-sizing: border-box;
}
</style>
</head>
<body>
<div id="parent-block">
<div class="child-block">
ویژگی margin فاصله دو بلاک از هم یا از تگ والد و ویژگی padding میزان فاصله و حاشیه ی محتوا یا عناصر درونی یک بلاک را در صفحات وب مشخص می کنند.
</div>
</div>
<hr>
با تنظیم مقادیر margin-right و margin-left به صورت auto بلاک div در وسط صفحه تنظیم می شود.
</body>
</html>

پیش نمایش آنلاین
نکته: ویژگی های margin و padding ممکن است در برخی نسخه های قدیمی مرورگر اینترنت اکسپلورر به خوبی نمایش داده نشوند، اگر این نسخه ها مورد نظر ما در طراحی باشد برای آنها باید استایل مخصوصی تعریف کنیم (آموزش جداگانه ای جهت درج استایل مخصوص اینترنت اکسپلورر در سایت منتشر شده است، لطفا عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر + وبگو" را در وب جستجو کنید).

دسته بندی: آموزش مقدماتی » CSS

برچسب ها: CSS

قبلی »

« بعدی

مطالب بیشتر:
نحوه تنظیم استایل لینک (Link) در CSS
کاربرد ویژگی position و float در CSS
سلکتور آی دی (ID) و کلاس (Class) در CSS
ویژگی های Font و Text در CSS
نحوه تنظیم لیست با تگ ul li در CSS

دیدگاه

۳۴ دیدگاه برای این مطلب ارسال شده است.

چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.

Zeinab

۱۲:۰۳ ۱۴۰۱/۰۷/۲۱

سلام من میخواستم بدونم که چرا توی اکثر سایت ها اول با universal selector (که با * در css انتخاب میشه) میان padding و margin رو صفر قرار میدن و بعد به هر المان padding و margin مخصوص خودش رو میدن؟ اگه میشه توضیح بدین که این کار برای چیه؟

مرورگرها معمولا به صورت پیش فرض مقدار padding و margin را در حد ۴ پیکسل اعمال می کنند که برای حذف و صفر شدن این مقدار پیش فرض از سلکتور سراسری * در CSS استفاده می شود، یک دلیل دیگر برای جلوگیری از عدم تداخل استایل های مختلف در صفحاتی است که از برنامه های سوم شخص (third party) در آنها استفاده می شود.

کوچ

۱۷:۵۳ ۱۳۹۷/۰۸/۲۰

ممنون استفاده بردیم استاد . عالی بود مرسی

ابراهیمی

۱۰:۰۲ ۱۳۹۶/۰۸/۱۰

سلام خسته نباشید. من برای سایتم از margin و padding استفاده کردم که در فایرفاکس درست نمایش می دهد و در کروم همه چیز به هم می ریزد. ممکنه منو راهنمایی کنید؟

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

حبیب

۲۱:۳۲ ۱۳۹۵/۱۰/۱۶

سلام توی خلاصه نویسی اشتباه نوشتید:

margin:10px 15px

برابر است با
بالا و پایین 10
چپ و راست 15
ولی شما گفتید فقط به بالا و راست هستند لطفا اصلاح کنید

بسیار ممنون از تذکر شما، اصلاح شد.

123

۱۲:۰۸ ۱۳۹۵/۰۹/۱۷

سلام من یه مشکلی دارم.
مثلا دو تا عنصر دارم که یکی بالا و دیگری در زیر اون قرار داره عنصر بالای رو به وسیله margin top به بالای صفحه میبرم حالا وقتی به عنصر پایینی margin top میدم عنصر بالایی هم جابجا میشه چطور این مشکل رو حل کنم لطفا کمک کنید

قاعدتا در حالت عادی عناصر صفحه بر اساس ترتیب در HTML DOM از هم تاثیر می پذیرند، برای نادیده گرفتن این تاثیر باید از روش هایی مانند استفاده از position با مقدار absolute در CSS استفاده کنید.

باران

۱۷:۱۴ ۱۳۹۵/۰۲/۱۲

سلام
سوال من اینه که تو قسمت margin ها margiin-left دادم اما اعمال نمیشه.
لطف می کنید بگید اشکال کارم کجاست؟
ممنون میشم زود جواب بدید.

 <table align="center" border="0" cellpadding="0" cellspacing="0" style="height:100px ; width:600px ; margin-top:10px; margin-right:10px; margin-left:10px ;" data-type="text">
<tr >
<td style="height:100px; width:500px;" dir="rtl">
با سلام کارجوی گرامی<br />
<br />با توجه به درخواست شما در قسمت پشتیبانی سایت کاران، شما می توانید جهت بهره مندی از خدمات سایت و مطلع شدن از آگهی های استخدامی مورد نیازتان نسبت به ثبت نام و تکمیل رزومه خود اقدام نمائید.همچنین می توانید به طور روزانه اگهی مورد نظر خود را از قسمت جستجو در سایت بیابید.
در صورت داشتن هرگونه سوال در رابطه با کاربری سایت آن را با پشتیبان ما در میان بگذارید.
<br /> با تشکر
<br />
<br /> <a href=" " target="_blank"  style="text-decoration-color:#3287f8">ورود به سایت</a></td>
</tr>
</table>

کد شما از این نظر مشکلی ندارد، جهت اطمینان می توانید کد را به همین صورت در یک صفحه HTML خالی درج و در مرورگر امتحان کنید، لذا به نظر مشکل از ناسازگاری این قسمت از کدنویسی با استایل دهی یا سایر قسمت های موجود در صفحه شما است که نیاز به بررسی دقیق تر دارد.

ابی

۱۰:۴۷ ۱۳۹۵/۰۲/۰۵

علت کار نکردن margin: 0 auto چی ها میتونه باشه؟؟؟

بدون دیدن سورس کدها نمی توان نظر خاصی ارائه کرد، معمولا عدم تعریف width یا تعریف خاصیت هایی مانند float می تواند این ویژگی را مختل کند، در کل باید ببینید چه خاصیت هایی در تضاد با margin عمل می کنند.

فرهاد ف

۱۹:۱۹ ۱۳۹۴/۱۲/۱۷

جناب استاد؛ با سلام و خسته نباشید. امکانش هست در خصوص این پاسخ کمی بیشتر توضیح داده و یا یک آموزش درست کنید.
پاسخ:
"در CSS حالتی وجود دارد به نام Collapsing Margins یا حاشیه های جمع شونده که به طور خلاصه یعنی برخی عناصر خنثی (یعنی بدون محتوی، بدون padding و بدون border) در ارتباط با عناصر مجاور دارای حاشیه یکسان می شوند، توضیح مفصل این قضیه در این قسمت نمی گنجد منتها برای رفع این حالت چند شیوه وجود دارد:
- تعریف خاصیت overflow با مقادیر auto برای تگ والد.
- تعریف خاصیت border برای تگ والد.
- تعریف خاصیت padding برای تگ والد.
- درج محتوا در ابتدا و انتهای بلاک والد.
نکته: سعی کنید ویژگی padding و margin را در تعامل با هم استفاده کنید."
بخصوص اینکه چرا باید 4 خاصیت بالا را اعمال کنیم تا margin بدرستی کار کند؟ کمی پیچیده شده.

منظور این نیست که هر چهار حالت را استفاده کنید، بلکه برای اینکه حاشیه ها به صورت نرمال توسط مرورگر پردازش شوند می توان با ترفندهایی که گفته شده وضعیت را به حالت غیر همپوشانی برگرداند، استفاده از هر مورد نیز بستگی به موقعیت کدنویسی و استایل دهی دارد، به طور مثال در صفحه زیر:

http://jsfiddle.net/XB9wX

خاصیت position با مقادیر absolute را از بلاک container حذف کنید و بر روی دکمه Run کلیک نمائید، مشاهده می کنید که با اینکه عنصر فرزند دارای margin با مقادیر 10 پیکسل است، اما حاشیه ای از بالا دیده نمی شود! در ادامه برای بلاک container خاصیت padding در نظر بگیرید، مشاهده می کنید که حاشیه ها به حالت اولیه خود برمی گردند!
در کل این حالت چندان در طراحی ها مشکل ساز نیست و یک نوع پردازش پیش فرض در مفسر CSS مرورگر است که اگر در هنگام کدنویسی، همزمان در چند مرورگر طرح خود را تست کنید، مشکلی نخواهید داشت.

داوود

۲۰:۱۷ ۱۳۹۴/۰۹/۰۳

سلام آقای مهندس، شبتون بخیر؛
یک نکته رو دیدم که گفتم براتون اینجا برای سایر خواننده های عزیز هم بزارم، اگه برداشت من اشتباه هستش؛ بیزحمت اصلاحش کنید.
نکته: اگر به دو div که در جوار همدیگر واقع شده اند (منظور این است که پدر و فرزند نیستند)، خاصیت margin: 15px 10px; را اعمال کنیم؛
الف) اگر این دو div در بالا و پایین همدیگر قرارداشته باشند،
Margin بزرگتر اعمال شده و اینطور نیست که از همدیگر 30px فاصله عمودی داشته باشند. در همین حال اگر در کنار همدیگر و بطور افقی قرار گرفته باشند، اتفاق قبلی یا double margin رخ نداده و دو حاشیه یا همان Margin با همدیگر جمع می شوند. بطور خلاصه یعنی فاصله این دو div از نظر عمودی 15px خواهد بود و از نظر افقی 20px.

ضمن تشکر از به اشتراک گذاری مطلب، بله، به نظر این حالت منطقی تر است.

داوود

۱۹:۲۱ ۱۳۹۴/۰۶/۱۱

سلام آقای مهندس؛
ممنونم ازتون و در خصوص مورد قبلی هم خواهش می کنم. در برابر اطلاعات و پاسخهایی که شما به ما میدین هیچ کاری نمیشه کرد که جبران محبت و لطف شما رو کرده باشه. اندوخته های شما مطمئنــاً حاصل چندین سال مطالعه و تجربه ست.
انشاالله موفق باشین.

خواهش می کنیم، نظر لطف شما است، به هر صورت هرچند تمام تلاش ما ارائه آموزش های بدون نقص است، اما گستردگی مباحث و مشغله روزمره باعث بروز اینگونه اشتباهات می شود که بدون کمک کاربران سایت قابل تشخیص نیست! از طرفی به هیچ وجه مدعی نیستیم که همه چیز را می دانیم، قطعا موارد زیادی است که ما هم باید آنها را فرا بگیریم! :-)

داوود

۰۹:۳۰ ۱۳۹۴/۰۶/۱۱

سلام استاد؛
وقتتون بخیر.
آقای مهندس در پاسخ به سوال دوستمون آقا محسن(آخرین سوال صفحه اول) شما یه کد به این شکل مرقوم فرمودین براشون:

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */

من این دستور رو زیاد رایج ندیدم. میشه یه توضیح بدین که این دستور در واقع چه عملی انجام میده؟ آیا اندازه یه div رو برامون فیکس فیکس میکنه؟؟ حتی اگه padding بهش بدیم؟؟
متشکر و عذرخواهم ازتون.

box-sizing خاصیتی در CSS3 است که در یک تعریف ساده با آن می توان تعیین کرد که آیا width و height یک باکس با احتساب padding و border محاسبه شود یا خیر، اگر از مقدار border-box استفاده کنید، padding و border در میزان width و height حل می شوند!
لطفا برای کسب اطلاعات تکمیلی لینک های زیر را بررسی کنید:

https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

https://developer.mozilla.org/en-US/docs/Web/CSS/box_model

داوود

۰۹:۲۷ ۱۳۹۴/۰۶/۱۱

سلام آقای مهندس؛ وقتتون بخیر.
استاد در خصوص این درس 2 تا نکته به ذهنم رسید که اگه صلاح دونستین و دیدین درسته، تو سایت قرار بدین.
نکته:
در اینجا که فرمودین:"به این صورت، بلاک div با کلاس فرضی main-block از تگ body و در واقع از حاشیه های صفحه نمایش، به میزان 4 پیکسل فاصله می گیرد." البته قبل از نوشتن کد نوشتین که از بالا 4 پیکسل فاصله میگیره، ولی تو اینجا نوشتین از "حاشیه ها" احساس کردم شاید خواننده فکر کنه از همه طرف این فاصله اعمال میشه.
نکته دوم:
تو این شبه کد:

.main-block{
    margin:10px 15px 20px;
}

که نوشتین معادل هست با:

.main-block{
    margin-top:10px;
    margin-right:15px;
    margin-bottom:20px;
}

در واقع باید یه margin-left:15px هم بذاریم دیگه! چون مقدار وسطی در این حالت برای چپ و راست در نظر گرفته میشه!

ضمن تشکر فراوان از نکاتی که گفتید، موارد اصلاح شدند!

داوود

۱۲:۲۴ ۱۳۹۴/۰۴/۲۵

سلام استاد عزیزم؛
با اجازه تون یه اسکرین شات گرفتم که می فرستم. البته میدونید چیه!
من اومدم و خاصیت clear رو که حدس میزدم از اون باشه برداشتم الان تو هر دو تا درست شد. میدونید چی حدس میزنم؟ با خودم میگم شاید مرورگر خودش میاد و این احتمالا نقص من رو پوشش میده ولی firebug نه!! بهر حال جالب بود برام و میخواستم شما هم در جریان کار قرار بگیرین و اینکه ممکنه گاهی اوقات با همدیگه یکی نباشه نتایج این inspector ها.
1- تصویر شماره 1- با Inspector مرورگر فایرفاکس:

http://s3.picofile.com/file/8200379176/1_with_firefox_inspector.jpg

2- تصویر شماره 2 با استفاده از افزونه firebug:

http://s3.picofile.com/file/8200379226/2_with_firebug.jpg

ممنون از به اشتراک گذاری.

داوود

۰۹:۱۹ ۱۳۹۴/۰۴/۲۰

سلام آقای مهندس، صبحتون بخیر و دستتون درد نکنه.
لف) آقای مهندس راستش رو بخواین در خصوص سوال قبلی من با firebug تست می کردم. پس چرا firebug نشون نمیده padding رو از پایین؟؟ خیلی برام عجیبه آخه من با خود firefox که الان تست کردم دیدم درسته ولی با firebug نه !! یعنی میشه بگیم که ممکنه firebug در برخی از حالات درست عمل نکنه؟؟ خوب اینجوری که نمیشه بهش اعتماد کرد؟؟؟
ب) آقای مهندس حالا اگه ما بیایم و در تگ div خودمون یه خاصیت float:right بذاریم! برای اینکه باز هم body تشخیص بده ارتفاع خودش رو باید از overflow استفاده کنیم دیگه درست میگم!!! فرق hidden با auto رو هم میشه بگین! کدومش رو معمولا استفاده کنیم بهتره؟؟
مرسی و ممنونم ازتون. دستتون درد نکنه مجددا.

- متاسفانه امکان بررسی افزونه Firebug میسر نیست اما ممکن است رفتار آن متفاوت یا برداشت شما صحیح نباشد! (ارائه یک اسکرین شات شاید به درک مشکل کمک کند).
- overflow برای مواقعی استفاده می شود که محتوا از ارتفاع تعیین شده یک عنصر تجاوز می کند، این خاصیت رفتار عنصر را در مواجه با تجاوز محتوا از حداکثر ارتفاع مشخص می کند، مقادیر hidden باعث می شود تا مرورگر مقدار اضافی را مخفی کند، اما مقدار auto باعث اسکرول بلاک، در صورتی که محتوا از مقدار ارتفاع مجاز تجاوز کند، می شود.

داوود

۰۸:۵۳ ۱۳۹۴/۰۴/۱۸

سلام آقای مهندس، صبحتون بخیر
استاد امکانش هست در صورت امکان این کد رو امتحان کنید:

<style type="text/css">
*{
	margin:0;
	padding:0;
}
body{
	padding:20px; 
}
span{
	background:yellow;
	border:1px solid #f08;
	float:right; 
}
div{
	height:150px;
	width:200px;
	background:grey;
	clear:right;
}
</style>
</head>
<body>
<span> welcome to this site</span>
<div>adfasdf</div>
</body>

الف)چرا الان اگه inspect بکنیم، حاشیه padding (که با رنگ بنفش مشخص میشه) از پایین در بر نگرفته؟؟ یعنی انگار طوری داری برخورد میکنه که div فرزند body نیست چون 3 طرف دارای padding هستن ولی از پایین ما padding مشاهده نمی کنیم. چرا؟؟
ب) این شبه کد رو ببینید در ارتباط با همین سوال:

span{
background:yellow;
border:1px solid #f08;
float:right; 
display:block;
}

الان که Inspect می کنیم، میبینم که علیرغم اینکه به span خاصیت block رو اعمال کردیم، ولی یک خط رو کامل اشغال نمیکنه و در واقع اون حالت block شدن رو نداره و تبدیل به inline شده انگاری، چرا؟؟ حالا اگه بیایم و float رو برداریم به این خواسته مون دست پیدا می کنیم، یعنی اینکه دقیقا یه خط یا بلاک رو میاد و اشغال می کنه؛ امکانش هست دلیلشو توضیح بدین؟؟ یعنی اینکه: چرا float رو که میذاریم خاصیت block روش تاثیری نداره و باهاش مثل inline برخورد میکنه.

- در مورد padding با Inspector مرورگر فایرفاکس بررسی شد، حاشیه سبز رنگ مربوط به padding تگ body است که در چهار طرف وجود دارد!
- تست شد، هیچ تفاوت خاصی دیده نشد! تگ span در یک خط بالاتر از بلاک div دیده می شود!

نخست

قبلی

بعدی

آخر

صفحه 1 از 3

لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.