آموزش برنامه نویسی وب🌐: بخش html قسمت هفتم (پس زمینه، margin، padding)

تصویر پس‌زمینه، پدینگ، مارجین و بوردر در CSS

1. تصویر پس‌زمینه (Background Image)

تصویر پس‌زمینه به شما این امکان را می‌دهد که از یک تصویر به عنوان پس‌زمینه عنصر خود استفاده کنید. شما می‌توانید تنظیمات مختلفی برای کنترل نحوه نمایش تصویر مانند اندازه، موقعیت و تکرار تصویر اعمال کنید.

مثال 1: استفاده ساده از تصویر پس‌زمینه


        <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 200px; width: 100%;">
        <h2>تصویر پس‌زمینه ساده</h2>
        </div>

مثال 2: استفاده از تصویر و کنترل اندازه


        <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 300px; width: 100%; background-size: cover; background-position: center;">
        <h2>تصویر پس‌زمینه با اندازه پوشش کامل</h2>
        </div>

در مثال بالا، از background-size: cover; برای پر کردن تمام فضا استفاده شده است.

مثال 3: استفاده از چندین تصویر پس‌زمینه


        <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'), url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); height: 200px; width: 100%; background-size: cover, c; background-position: left top, right bottom;">
        <h2>چندین تصویر پس‌زمینه</h2>
        </div>

در این مثال، دو تصویر به عنوان پس‌زمینه تعریف شده‌اند که یکی با cover و دیگری با c تنظیم شده است.

2. پدینگ (Padding)

پدینگ فضای داخلی عنصر را از محتوای آن جدا می‌کند. این ویژگی برای تنظیم فاصله‌های داخلی استفاده می‌شود.

مثال 1: پدینگ یکسان در همه طرف‌ها


        <div style="background-color: lightblue; padding: 20px;">
        <p>این باکس دارای پدینگ 20 پیکسل است.</p>
        </div>

مثال 2: پدینگ جداگانه برای هر طرف


        <div style="background-color: lightgreen; padding-top: 10px; padding-right: 20px; padding-bottom: 30px; padding-left: 40px;">
        <p>پدینگ متفاوت برای هر طرف</p>
        </div>

مثال 3: پدینگ ترکیبی (مختصر)


        <div style="background-color: lightcoral; padding: 10px 20px 30px 40px;">
        <p>پدینگ ۱۰px بالا، ۲۰px راست، ۳۰px پایین و ۴۰px چپ</p>
        </div>

3. مارجین (Margin)

مارجین فاصله بیرونی عنصر از سایر عناصر را تنظیم می‌کند.

مثال 1: مارجین یکسان در تمام جهات


        <div style="background-color: lightyellow; margin: 50px;">
        <p>این باکس دارای مارجین 50 پیکسل است.</p>
        </div>

مثال 2: مارجین متفاوت در هر طرف


        <div style="background-color: lightpink; margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px;">
        <p>مارجین متفاوت برای هر طرف</p>
        </div>

مثال 3: مارجین ترکیبی


        <div style="background-color: lightgray; margin: 10px 20px 30px 40px;">
        <p>مارجین ۱۰px بالا، ۲۰px راست، ۳۰px پایین و ۴۰px چپ</p>
        </div>

مثال 4: تنظیم خودکار مارجین (Auto)


        <div style="background-color: lightblue; width: 50%; margin: 0 auto;">
        <p>این باکس به صورت افقی در مرکز قرار می‌گیرد.</p>
        </div>

در مثال بالا، از margin: 0 auto; استفاده شده تا عنصر به صورت خودکار در مرکز قرار گیرد.

4. بوردر (Border)

بوردر یا حاشیه می‌تواند به هر عنصر اضافه شود تا ظاهری مرزبندی شده به آن بدهد. شما می‌توانید رنگ، ضخامت و نوع خطوط بوردر را کنترل کنید.

مثال 1: بوردر ساده


        <div style="border: 2px solid black;">
        <p>این باکس دارای بوردر مشکی و ضخامت 2 پیکسل است.</p>
        </div>

مثال 2: بوردر خط‌چین


        <div style="border: 3px dashed red;">
        <p>این باکس دارای بوردر خط‌چین قرمز است.</p>
        </div>

مثال 3: بوردر ترکیبی (مختصر)


        <div style="border: 5px dotted green;">
        <p>این باکس دارای بوردر نقطه‌چین سبز با ضخامت 5 پیکسل است.</p>
        </div>

مثال 4: بوردرهای متفاوت برای هر طرف


        <div style="border-top: 2px solid black; border-right: 4px dashed red; border-bottom: 6px dotted green; border-left: 8px double blue;">
        <p>این باکس دارای بوردرهای مختلف برای هر طرف است.</p>
        </div>

مثال نهایی: ترکیب همه ویژگی‌ها

در این مثال، از تصویر پس‌زمینه، پدینگ، مارجین و بوردر استفاده شده است.


        <div style="background-image: url('https://blogfreedom.ir/uploaded_img/fe97a69c-91c7-4745-8184-35ffc2fc274e.webp'); background-size: cover; background-position: center; padding: 30px; margin: 50px; border: 5px solid blue; text-align: center; color: white;">
        <h2>مثال نهایی</h2>
        <p>این باکس شامل تصویر پس‌زمینه، پدینگ 30px، مارجین 50px و بوردر آبی 5 پیکسل است.</p>
        </div>

قسمت بعدی