استفاده از padding و margin در دستورات Css
Cascading Style Sheets، یا به اختصار CSS، برای دادن ظاهری کاملاً فردی به یک وب سایت استفاده می شود. با استفاده از عناصر CSS و حاشیه، می‌توانید بر روی چیدمان عناصر HTML تأثیر بگذارید و وب‌سایت خود را از نظر سبک ظاهری به روز کنید.
استفاده از padding و margin : مبانی HTML
برای درک اینکه چگونه padding در مقابل حاشیه CSS بر قالب بندی و ظاهر وب سایت شما تأثیر می گذارد، ابتدا باید برخی از اصول اولیه HTML را بدانید. در زبان نشانه گذاری، می توانید طیف وسیعی از عناصر مختلف را ایجاد کنید که در نهایت در یک وب ظاهر می شوند. در این عناصر، باید بین دو گروه تمایز قائل شوید: عناصر درون خطی و بلوک.
عناصر HTML درون خطی عناصری هستند که همراه با متن وب سایت شما جریان دارند و نیازی به پاراگراف خاص خود ندارند. نمونه‌های معمولی تگ em یا b هستند که از قبل در اسکریپت HTML اطمینان می‌دهند که محتوای بین تگ باز و بسته به صورت مورب یا پررنگ در مرورگر وب نمایش داده می‌شود.
برخلاف عناصر درون خطی، عناصر بلوک والد آنها به پاراگراف خاص خود نیاز دارند. شما می توانید عناصر بلوک را به عنوان نوعی جعبه در نظر بگیرید که تمام عرض صفحه شما را در بر می گیرد. به طور مشابه، می توانید به طور طبیعی عرض و ارتفاع عناصر بلوک را طوری تنظیم کنید که جعبه نسبت به صفحه نمایش کوچک یا بزرگ شود. عناصر بلوک را می توان نسبت به یکدیگر تراز کرد و اجزای ضروری برای چیدمان یک وب سایت هستند. نمایندگان معمولی این دسته از عناصر HTML، به عنوان مثال، سرفصل های h1 تا h6 و ظرف div هستند.
padding چیست؟
هنگامی که با ساختار اصلی عناصر مختلف HTML آشنا شدید، به راحتی می توانید متوجه شوید که منظور از padding CSS چیست. به طور خلاصه، padding به فاصله داخلی از محتوای یک عنصر تا مرزهای عنصر اشاره دارد. باز هم، این کمک می کند که عناصر بلوک را به عنوان جعبه در نظر بگیرید.
به عنوان مثال، هنگامی که یک ظرف div ایجاد می کنید، ویژگی های CSS padding-top، padding-left، padding-bottom و padding-right هر کدام نشان دهنده فاصله محتوای متنی از دو طرف کادر ایجاد شده برای آن عنصر HTML است.
یک مثال کد که در آن ما CSS را در HTML جاسازی کردیم به توضیح این موضوع کمک می کند:
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
font-family: arial;
}
div {
background-color: blue;
padding-top: 100px;
padding-left: 50px;
padding-bottom: 40px;
padding-right: 50px;
color: white;
font-family: arial;
}
</style>
</head>
<body>
<h2>How to use padding:</h2>
<div>This is a div-element with the following values for padding:
<ul>
<li> padding-top: 100px.</li>
<li> padding-right: 50px.</li>
<li> padding-bottom: 40px.</li>
<li>padding-left: 50px.</li>
</ul>
</div>
</body>
</html>ظرف div ایجاد شده توسط کد بالا به شکل زیر است:
Padding syntax
می توانید از padding CSS به روش های مختلفی استفاده کنید. یکی از ترفندهای مفید CSS استفاده از نمادهای کوتاه است. نمادهای کوتاه نویسی مختلف می توانند به شما در فشرده سازی کد CSS در صورت نیاز کمک کنند.
هر چهار مقدار را مشخص کنید
ساده ترین روش این است که فاصله داخلی را که می خواهید برای هر چهار طرف عنصر بدست آورید، مشخص کنید. برای انجام این کار، از دستورات CSS جداگانه padding-top، padding-left، padding-bottom و padding-right استفاده کنید. همچنین می توانید از سینتکس مختصر استفاده کنید:
padding: 100px 50px 40px 50px;در اینجا شما هر چهار مقدار را در یک دستور مشخص می کنید. ترتیب این است: padding بالا، padding سمت راست، padding پایین و padding چپ.
مهم نیست که کدام نماد را انتخاب می کنید، اندازه padding های شما را می توان با واحدهای مختلف مشخص کرد. اگر انتخاب کنید که آن را در پیکسل مشخص کنید، این یک مقدار ثابت است که تغییر نخواهد کرد. به عنوان مثال، اگر با پرس و جوهای رسانه ای CSS کار می کنید و می خواهید وب سایت شما به صورت پویا با اندازه های مختلف صفحه سازگار شود، این رویکرد نامناسب است. شما باید اطلاعات جدیدی را برای هر اندازه صفحه مشخص کنید. برای صرفه جویی در این تلاش، اغلب از مشخصات درصدی فاصله داخلی استفاده می شود. درصد به ارتفاع یا عرض جعبه اشاره دارد.
استفاده از padding و margin : فقط سه مقدار را مشخص کنید
بسته به کاربرد مورد نظر شما، ممکن است برای سفارشی کردن padding برای وب سایت خود به هر چهار مقدار نیاز نداشته باشید. تعیین تنها سه مقدار در نحو مختصر padding به این معنی است که مقدار اول برای فاصله داخلی از بالا (padding-top)، مقدار دوم برای فاصله داخلی به طرفین (padding-right و padding-left) استفاده می شود. ، و مقدار سوم برای فاصله داخلی تا پایین (padding-bottom) استفاده می شود. این به ویژه زمانی مفید است که می خواهید محتوای یک عنصر را در محور افقی متمرکز کنید.
فقط دو مقدار را مشخص کنید
مشخصات دو مقدار به طور مشابه رفتار می کند، جایی که مقدار اول به عنوان فاصله بالا و پایین و مقدار دوم به عنوان فاصله از راست و چپ تفسیر می شود.
یک مقدار را مشخص کنید
درست حدس زدید: یک مقدار مشخص شده پس از عنصر CSS باعث می شود که فاصله داخلی با هر چهار طرف عنصر شما یکسان باشد. به این ترتیب، می توانید کاملاً محتوا را در عنصر خود متمرکز کنید.
margin چیست ؟
اگر CSS را یاد بگیرید، نمی توانید از حاشیه اجتناب کنید. این نیز یک عنصر CSS است که برای سفارشی کردن طرح بندی عناصر HTML و وب سایت شما استفاده می شود. بر خلاف padding، حاشیه به فاصله بیرونی یک عنصر از سایر عناصر مجاور یا از مرزهای وب سایت شما اشاره دارد. خوشبختانه، نحو حاشیه با نحو padding یکسان است، بنابراین شما فقط باید یک نماد را به خاطر بسپارید.
نمادهای حاشیه ای با چهار، سه، دو یا فقط یک مقدار نیز مشابه نمادهای تندنویسی هستند.
بهترین راه برای نشان دادن حاشیه بیرونی استفاده از یک مثال کد ساده است که در آن دو ظرف div ایجاد می شود:
<html>
<head>
<style>
div {
background-color: blue;
margin-top: 10px;
margin-bottom: 20px;
width: 50%;
height: 50px;
font-family: arial;
color: white;
}
</style>
</head>
<body>
<div>
A div-container.
</div>
<div>
A second div-container. The spacing between the two containers is determined by margin.
</div>
</body>
</html> 
چه زمانی از padding یا margin استفاده کنید
هر زمان که نیاز به قالب بندی محتوا نسبت به عنصر اصلی آن داشتید، از padding استفاده کنید. هر زمان که نیاز دارید چندین عنصر را نسبت به یکدیگر یا نسبت به اندازه صفحه یا پنجره قرار دهید، حاشیه ابزار انتخابی شماست. در عمل، دو دستور CSS به ندرت به تنهایی رخ می دهند. بیشتر اوقات، padding و margin باید با هم ترکیب شوند تا ظاهری را که برای وب سایت خود می خواهید به دست آورید. این کار به راحتی با نامگذاری هر دو عنصر CSS در فایل HTML یا CSS و تعیین مقادیر مناسب انجام می شود.
مدل جعبه: CSS padding در مقابل حاشیه
تفاوت بین حاشیه و padding را می توان به ویژه در مدل جعبه آشنا به راحتی مشاهده کرد.
استفاده از padding و margin
ترجمه شده توسط سایت دریای شرق از سایت
کپی بدون ذکر نام و لینک سایت دریای شرق ممنوع است !