CSS در margin تعیین
- فارغ از boarder برای المان های مختلف میتوانیم میزان فاصله از حاشیه ها (margin) را مشخص کنیم. در واقع boarder نیز یک المان محسوب میشود که در فضای خارجی آن میتوان میزان فاصله از لبه های صفحه را مشخص کرد.
- برای margin میتوانیم میزان فاصله در چهار جهت مختلف را با ویژگی های margin-top, margin-right, margin-left, margin-bottom تعیین کنیم.
- مقادیر مربوط به marginها میتوانند چند مدل مختلف باشند: auto که به صورت اتوماتیک براساس اندازه صفحه میزان فاصله استاندارد را ایجاد میکند، length که در این حالت میزان فاصله را براساس طول و با واحد پیکسل (px)، سانتی متر (cm) و… تنظیم میکنیم، % که در حالت درصدی میزان درصد فاصله از حاشیه ها را تنظیم میکنیم.
- توجه کنید که مقادیر منفی نیز قابل قبول هستند.
مثال:
p { margin: 25px 50px 75px 100px; }
- درنهایت میتوان یکسری تنظیمات مانند رنگ زمینه، ضخامت boarder، نوع boarder و… برای marginها تعیین کرد.
مثال:
div { width: 300px; margin: auto; border: 1px solid red; }
CSS در padding ساخت
padding برای ایجاد فضای خالی اطراف المان های html مورد استفاده قرار میگیرد. مقدار دهی padding نیز مانند margin انجام می شود.
مثال:
<html> <head> <style> div { padding: 70px; border: 1px solid #4CAF50; } </style> </head> <body>
<h2>CSS Padding</h2> <div>This element has a padding of 70px.</div> </body> </html>
CSSتعیین عرض و ارتفاع در
برای همه المان های html میتوانیم عرض و ارتفاع تعیین کنیم. برای تعیین عرض و ارتفاع باید برای height و width مقدار تعیین کنیم و این مقداردهی مانند مقادیر تعریف شده برای margin به چندین حالت auto، length و درصدی انجام می شود.
مثال:
<html>
<head>
<style>
p {
height: 100px;
width: 600px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<p>This paragraph has a height of 100px and a width of 600px.</p>
</body>
</html>
- ویژگی دیگری که برای عرض و ارتفاع مورد استفاده قرار میگیرد max-width و max-height است. اگر از این دو مقدار استفاده کنیم در اصل مشخص کردیم که در حالت ماکزیمم عرض و ارتفاع چقدر باشد و درصورت کوچک بودن صفحه این طول و عرض نیز متناسب با اندازه صفحه تغییر می کنند اما اگر از height و width ساده استفاده کنیم درصورت کوچک بودن صفحه مقادیر طول عرض تغییری نمیکند و در صفحه scroll ایجاد می شود.