تنظیم مکان تصویر در هدر

همه‌ی ما می‌دانیم که وجود تصاویر در وب‌سایت‌ها به زیباسازی و جلب توجه کاربران کمک جدی می‌کند. اما بعضی وقت‌ها لازم است تا مکانی که تصاویر قرار داده شده‌اند را تغییر دهیم تا طراحی وب‌سایت ما بهتر و حرفه‌ای‌تر دیده شود. حالا فرض بگیرید که در پروژه‌ای هستید و باید تصویری که در سمت راست یک هدر قرار دارد، کمی به سمت چپ جابه‌جا کنید، اما بقیه‌ی اجزای هدر تغییر نکند. سوال این است: چطور می‌توانیم این کار را انجام دهیم بدون اینکه ناخواسته بقیه هدر جابه‌جا شود یا به‌هم بریزد؟

برای انجام این کار، نیاز است به CSS رجوع کنیم. CSS به ما اجازه می‌دهد تا با استفاده از ویژگی‌های مختلف مکان و اندازه تصاویر و عناصر دیگر را کنترل کنیم. معمولاً می‌توانیم از ویژگی‌هایی مانند margin یا position استفاده کنیم تا منطقه‌ی خاصی از تصویر را مشخص کرده و آن را در جهت مورد نظر حرکت دهیم.

چون هدف ما فقط جابه‌جایی تصویر به سمت چپ است بدون اینکه تاثیر دیگری بر روی بقیه هدر بگذارد، می‌توانیم از margin-right روی تصویر استفاده کنیم. این ویژگی به ما امکان تغییر فاصله‌ی سمت راست تصویر را می‌دهد و تصویر را به سمت چپ جابه‌جا می‌کند.

حالا چگونه این کار را عملی کنیم؟ در قطعه کد زیر، ما به سادگی تصویر سمت راست را انتخاب کرده و با اعمال یک margin-left کوچک، مکان آن را تغییر می‌دهیم.

<style>
  .header img {
      margin-left: -20px;
  }
</style>

<div class="header">
    <h1>عنوان سایت</h1>
    <img src="image.jpg" alt="تصویر">
</div>

توضیحات قطعه کد:
.header img: انتخاب تصویر موجود در عنصر هدر.
margin-left: -20px;: به کمک این خط، ۲۰ پیکسل از سمت چپ کم می‌کنیم تا تصویر به سمت چپ حرکت کند.