آموزش برنامه نویسی وب و مهارتهای مرتبط
شنبه ۲۲ شهریور ۱۴۰۴
Saturday, September 13, 2025 GMT +3:30
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>روش های تعریف مقدار برای ویژگی 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%;
}مختصر نویسی ویژگی margin
ویژگی margin را می توانیم به صورت مختصر و خطی نیز بنویسیم، در حالت مختصر نویسی به جای تعریف کلی یا تعریف ویژگی های زیرمجموعه در جهت های بالا، راست، پائین و چپ، با نوشتن مقادیر margin در یک خط به همان هدف اما با میزان کدنویسی کمتر دست پیدا می کنیم، به طور مثال:
.main-block {
margin: 2px 3px 1px 5px;
}<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;
}.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;
}نکته: برای بررسی و مشاهده پیش نمایش آنلاین لطفا به انتهای این آموزش مراجعه کنید.
ویژگی padding در CSS
از ویژگی padding در CSS جهت تعیین میزان حاشیه ی درونی عناصر صفحه استفاده می کنیم، به عبارتی padding فاصله محتوای یک بلاک از لبه های داخلی آن را مشخص می کند، به فرض اگر بخواهیم مطالب درونی یک لایه به میزان 4 پیکسل از کناره های آن فاصله داشته باشد کافیست برای استایل یا کلاس مربوط به آن لایه یک مقدار padding در نظر بگیریم، به طور مثال:
<style>
.main-block {
padding: 4px;
}
</style>
.
.
<body>
<div class="main-block">محتوای بلاک</div>
</body>.main-block {
padding-top: 4px;
padding-right: 10px;
padding-bottom: 6px;
padding-left: 8px;
}.main-block {
padding: 4px 10px 6px 8px;
}نکته: در حالت پیش فرض میزان حاشیه داخلی (padding) به ارتفاع (height) و عرض (width) موجود بلاک اضافه می شود، برای تغییر این حالت و عدم احتساب padding به ارتفاع و عرض می توانیم از خاصیت box-sizing با مقادیر border-box استفاده کنیم:
.main-block {
height: 50px;
width: 200px;
padding: 4px 10px 6px 8px;
box-sizing: border-box;
}مثال و پیش نمایش آنلاین
جهت آشنایی بیشتر با ویژگی های 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
مطالب بیشتر:کاربرد ویژگی position و float در CSS
ویژگی های Font و Text در CSS
کاربرد خاصیت display در CSS
نحوه تنظیم استایل لینک (Link) در CSS
مقدمه ای بر CSS و استایل دهی صفحات وب
دیدگاه
۳۴ دیدگاه برای این مطلب ارسال شده است. چینش دیدگاه ها به ترتیب از جدیدترین به قدیمی ترین است.داوود
۰۸:۵۲ ۱۳۹۴/۰۴/۰۷
سلام آقای مهندس؛
صبحتون بخیر و خوشی و دست گلتون درد نکنه بابت پاسخی که مرقوم داشتین.
استاد راستش خیلی خوب درک نکردم ولی خوب دارم جستجو می کنم تا نتایج بیشتری رو بگیرم و همینکه اشاره فرمودین مربوط به کدوم قسمت میشه عالیه.
آقای مهندس این قسمت که فرمودین " نکته: سعی کنید ویژگی padding و margin را در تعامل با هم استفاده کنید." رو میشه یه خورده بیشتر توضیح بدین؟؟
ضمنا این عبارت که در همین زمینه به چشمم خورد به چه معناست:
"Margin فقط بین 2 عنصر خارجی هستش (یعنی عنصرهایی که نسبت به هم تو یک سطح قراردارن و عنصری پدر عنصر دیگه نیست)
صبحتون بخیر و خوشی و دست گلتون درد نکنه بابت پاسخی که مرقوم داشتین.
استاد راستش خیلی خوب درک نکردم ولی خوب دارم جستجو می کنم تا نتایج بیشتری رو بگیرم و همینکه اشاره فرمودین مربوط به کدوم قسمت میشه عالیه.
آقای مهندس این قسمت که فرمودین " نکته: سعی کنید ویژگی padding و margin را در تعامل با هم استفاده کنید." رو میشه یه خورده بیشتر توضیح بدین؟؟
ضمنا این عبارت که در همین زمینه به چشمم خورد به چه معناست:
"Margin فقط بین 2 عنصر خارجی هستش (یعنی عنصرهایی که نسبت به هم تو یک سطح قراردارن و عنصری پدر عنصر دیگه نیست)
- منظور این است که در طراحی ها گاهی موارد اینچنین وجود دارد که به فرض margin برای تگ فرزند جوابگو نیست، اما می توان با در نظر گرفتن padding برای تگ والد همان نتیجه را بدست آورد.
- این گفته صحیح نیست، برای اطمینان در همان مثالی که درج کرده اید به جای margin مقادیر زیر را جایگزین کنید:
- این گفته صحیح نیست، برای اطمینان در همان مثالی که درج کرده اید به جای margin مقادیر زیر را جایگزین کنید:
margin-left:25px;داوود
۱۳:۲۴ ۱۳۹۴/۰۴/۰۶
سلام آقای مهندس؛ وقت بخیر و امیدوارم حالتون خوب باشه. ببخشید که سوالات امروزم به 2 عدد رسید.
آقای مهندس در خصوص مبحث margin به این شبه کد توجه کنید:
خب با اطمینان خاطر ارتفاع div ها رو با border ها و margin و padding جمع کردم (البته double margin رو هم مد نظر قرار دادم و max رو در نظر گرفتم) و اینجوری جمع کردم:
3 تا div با ارتفاع 100 داریم میشه: 300 تا
هر کدومشون 1px border از بالا و پایین دارن میشه: 6 تا
برای هر کدوم 30 تا padding داریم میشه: 90 تا
و اما margin:
اینجوری حساب کردم:
گفتم اولی از بالا 15 تا داره این میشه 15 تا از پایین 10 تا داره و چون یکی بعدی 15 تا داره پس ماکزیمم رو باید بگیریم که میشه 15 تا.
پایینی هم همینطور که میشه 15 تا.
و margin-bottom پایینی هم هست دیگه که میشه 15 تا. یعنی در واقع میشد 60 تا.
حالا که اومدم و نگاه میکنم میبینم من 30 تا اشتباه حساب کرده بودم و اونهم بخاطر حساب کردن 15 تای بالایی و 15 تای پایین بود.
البته اگه بیایم و از property هایی مثل inline-block یا float برای عناصری مثل div و wrapper استفاده کنیم حرف من درست میشه و محاسباتم درست درمیاد ولی سوالم اینه که چرا div های اول و آخری میچسبن به wrapper و بدجوری هم به والدشون چسبیدن. امکانش هست در این خصوص توضیح بدین؟! ممنونم ازتون.
آقای مهندس در خصوص مبحث margin به این شبه کد توجه کنید:
<style type="text/css">
#wrapper{
background-color:blue;
}
#wrapper div{
width:120px;
height:100px;
background:#eee;
padding:10px 15px 20px 25px;
border:1px solid #444;
margin:15px 10px;
}
</style>
</head>
<body>
<div id="wrapper">
<div></div>
<div></div>
<div></div>
</div>
</body>http://jsfiddle.net/Lvk1f87dخب با اطمینان خاطر ارتفاع div ها رو با border ها و margin و padding جمع کردم (البته double margin رو هم مد نظر قرار دادم و max رو در نظر گرفتم) و اینجوری جمع کردم:
3 تا div با ارتفاع 100 داریم میشه: 300 تا
هر کدومشون 1px border از بالا و پایین دارن میشه: 6 تا
برای هر کدوم 30 تا padding داریم میشه: 90 تا
و اما margin:
اینجوری حساب کردم:
گفتم اولی از بالا 15 تا داره این میشه 15 تا از پایین 10 تا داره و چون یکی بعدی 15 تا داره پس ماکزیمم رو باید بگیریم که میشه 15 تا.
پایینی هم همینطور که میشه 15 تا.
و margin-bottom پایینی هم هست دیگه که میشه 15 تا. یعنی در واقع میشد 60 تا.
حالا که اومدم و نگاه میکنم میبینم من 30 تا اشتباه حساب کرده بودم و اونهم بخاطر حساب کردن 15 تای بالایی و 15 تای پایین بود.
البته اگه بیایم و از property هایی مثل inline-block یا float برای عناصری مثل div و wrapper استفاده کنیم حرف من درست میشه و محاسباتم درست درمیاد ولی سوالم اینه که چرا div های اول و آخری میچسبن به wrapper و بدجوری هم به والدشون چسبیدن. امکانش هست در این خصوص توضیح بدین؟! ممنونم ازتون.
در CSS حالتی وجود دارد به نام Collapsing Margins یا حاشیه های جمع شونده که به طور خلاصه یعنی برخی عناصر خنثی (یعنی بدون محتوی، بدون padding و بدون border) در ارتباط با عناصر مجاور دارای حاشیه یکسان می شوند، توضیح مفصل این قضیه در این قسمت نمی گنجد منتها برای رفع این حالت چند شیوه وجود دارد:
- تعریف خاصیت overflow با مقادیر auto برای تگ والد.
- تعریف خاصیت border برای تگ والد.
- تعریف خاصیت padding برای تگ والد.
- درج محتوا در ابتدا و انتهای بلاک والد.
نکته: سعی کنید ویژگی padding و margin را در تعامل با هم استفاده کنید.
- تعریف خاصیت overflow با مقادیر auto برای تگ والد.
- تعریف خاصیت border برای تگ والد.
- تعریف خاصیت padding برای تگ والد.
- درج محتوا در ابتدا و انتهای بلاک والد.
نکته: سعی کنید ویژگی padding و margin را در تعامل با هم استفاده کنید.
۱۷:۰۶ ۱۳۹۴/۰۳/۱۶
با سلام
ممنون از سایت خوبتون
موفق باشید
ممنون از سایت خوبتون
موفق باشید
محسن
۱۱:۵۷ ۱۳۹۴/۰۳/۰۴
متشکرم از پاسخ گویی شما
محسن
۱۹:۵۳ ۱۳۹۴/۰۳/۰۳
با سلام
چگونه از تاثیر padding بر سایر المان ها جلوگیری کنیم. منظورم اینه که مثلا دو تا div داریم که دایو دوم زیر دایو اول و مثلا در موقعیت 500px از بالا قرار دارد حالا اگه مقدار padding دایو اول رو فرضا 20px قرار بدیم اونوقت دایو دوم از موقعیت 500px به موقعیت 520px می ره.
چی کار کنم که از اتفاق جلوگیری شود
چگونه از تاثیر padding بر سایر المان ها جلوگیری کنیم. منظورم اینه که مثلا دو تا div داریم که دایو دوم زیر دایو اول و مثلا در موقعیت 500px از بالا قرار دارد حالا اگه مقدار padding دایو اول رو فرضا 20px قرار بدیم اونوقت دایو دوم از موقعیت 500px به موقعیت 520px می ره.
چی کار کنم که از اتفاق جلوگیری شود
می توانید استایل زیر را به بلاک خود اضافه کنید:
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */۱۶:۵۴ ۱۳۹۳/۱۰/۲۹
متشکرم ... واقعا فقط یه طراح وبه که میتونه تلاش و وقتی رو که برای نوشتن این مطالب مفید و ارزشمند گذاشته شده رو درک کنه :)
neda
۱۵:۵۳ ۱۳۹۳/۰۴/۲۹
سلام دوست عزیز من میخوام margin-right متفاوت از مرورگر های دیگه برای IE V7 تعریف کنم اما نمیدونم چطوری.
چون در مرورگر های دیگه margin-right=27px صحیح کار میکنه ولی در IE v7 باید 0 باشه
اگه میتونید راهنمایی کنید ممنون
چون در مرورگر های دیگه margin-right=27px صحیح کار میکنه ولی در IE v7 باید 0 باشه
اگه میتونید راهنمایی کنید ممنون
لطفا در وب عبارت "تنظیمات CSS مخصوص مرورگر اینترنت اکسپلورر" را جستجو کنید.
hamed
۱۸:۰۱ ۱۳۹۳/۰۳/۱۰
سلام من وقتی از word-warp:break word استفاده می کنم دچار مشکل میشم چون هرخط بطور جداگانه تفسیر میشه و وقتی بخوام پشت خطوط رنگ زمینه بندازم یا border تعریف کنم برای هر خط بطور جداگانه رنگ زمینه و border تعریف میکنه در حالی که میخوام یک رنگ زمینه و border برای تمام خطوط استفاده بشه
هر چند نمونه کدی قرار نداده اید، اما به نظر اگر ابتدا یک بلاک والد (بلاک اصلی) داشه باشید و خاصیت های مربوط به رنگ و خط حاشیه را به آن اختصاص دهید، سپس یک بلاک سطح پائین تر در درون آن داشته باشید و خاصیت های دیگر را نسبت دهید، مشکل حل خواهد شد.
مریم
۰۰:۳۲ ۱۳۹۲/۱۰/۲۴
سلام سایت خیلی خوبی دارید وخیلی ممنون بابت زحمتتون.
میخوام قسمت هد سایتم مثه سایت زیر باشه.
ممنون میشم در اولین فرصت پاسخ بدید. چون سریعا نیاز دارم.
میخوام قسمت هد سایتم مثه سایت زیر باشه.
http://tehran.academia.edu/ممنون میشم در اولین فرصت پاسخ بدید. چون سریعا نیاز دارم.
پیش از هر چیز باید با تکنیک های حرفه ای CSS و طراحی وب آشنا باشید، به فرض این قابلیت را می توان با تعریف یک یا چند div برای هدر و در نظر گرفتن پس زمینه سفید و سپس متصل کردن قسمت هدر با قسمت اصلی و همپوشانی آن با رنگ مشابه بدست آورد، هر چند درک این تکنیک تنها در صورتی ممکن است که قبلا قالب های ساده تر را طراحی و با تکنیک های پایه مانند تبدیل طرح از فتوشاپ به HTML آشنا باشید.
Bardia
۲۰:۲۳ ۱۳۹۲/۱۰/۰۸
سلام.
فقط یه نکته :
از مقادیر منفی هم میشه برای این تگ استفاده کرد.
فقط یه نکته :
از مقادیر منفی هم میشه برای این تگ استفاده کرد.
خیلی ممنون از یادآوری.
پگاه
۰۷:۳۶ ۱۳۹۲/۰۷/۱۷
با تشکر از پاسختون
اتفاقا در همین مثالی که زدید هم همینطوره وقتی به div پراپرتی width رو ندیم عرض کل صفحه رو اشغال می کنه و وقتی padding:50px می دیم عرضی که div در صفحه اشغال کرده هیچ فرقی نمی کنه خودتون امتحان کنید
اتفاقا در همین مثالی که زدید هم همینطوره وقتی به div پراپرتی width رو ندیم عرض کل صفحه رو اشغال می کنه و وقتی padding:50px می دیم عرضی که div در صفحه اشغال کرده هیچ فرقی نمی کنه خودتون امتحان کنید
هنگامی که بلاک خاصیت width ندارد، در واقع حالت پیش فرض (auto) برای آن در نظر گرفته می شود، مشخص است که در این صورت padding با مقدار 50 پیکسل تاثیری در ظاهر بلاک نخواهد داشت (چون مقادیر auto آن را در خود حل می کند!)، اما اگر به فرض حالت زیر را در نظر بگیرید:
<style type="text/css">
.test{
padding:50px;
border:1px solid #999;
width:100%;
}
</style>
<div class="test"></div>پگاه
۱۲:۱۷ ۱۳۹۲/۰۷/۱۶
در سایت w3schools گفته که padding-right و padding-left به width اضافه میشه اما اینطور که من تست کردم اگر به المان width بدیم padding به width اضافه میشه اما اگر به المان width ندیم padding به width اضافه نمیشه و عرض المان ثابت می مونه
پس درستش چیه؟
پس درستش چیه؟
padding در هر صورت به width اضافه می شود، برای اطمینان مقادیر زیادی برای آن در نظر بگیرید، مثال:
<style type="text/css">
.test{
padding:50px;
border:1px solid #999;
}
</style>
<div class="test"></div>۱۹:۱۰ ۱۳۹۲/۰۵/۱۵
جناب من تغییر سفارشی نمی خوام
بی زحمت راهنمایی کنید
بی زحمت راهنمایی کنید
منظور از تغییرات سفارشی، درخواست هایی است که نیاز به ویرایش سورس کد وبلاگ و به فرض تغییر سلیقه ای چینش محتوا و... دارند، راهنمایی خاصی نمی توان در مورد مشکل شما داشت چون باید زمینه قبلی در CSS داشته باشید، تغییر بدون تسلط بر این موضوع، مشکلات دیگری در ظاهر وبلاگ شما ایجاد می کند.
۲۳:۱۴ ۱۳۹۲/۰۵/۱۱
سومین کد کار کرد!!
فقط می تونم بگم بی نظیری! واقعا کسی نتونسته بود
برای تشکر کوچک
آدرس سایتتون رو لینک کردم
دو سوال دیگه داشتم اگه امکانش هست و هر وقت تونستید راهنماییم کنید:
سوال اول
در وبلاگ من کد آخرین مطالب در پایین صفحه هست و بصورت افقی چطور اون رو به سمت راست وبلاگ بیارم و مثل دیگر سایتها و وبلاگها:
من طبق عکس پایین دو جابه جایی می خواستم انجام بدم
یکی عنوان سایت
و دیگری بلوک سرچ
قالب:
فقط می تونم بگم بی نظیری! واقعا کسی نتونسته بود
برای تشکر کوچک
آدرس سایتتون رو لینک کردم
دو سوال دیگه داشتم اگه امکانش هست و هر وقت تونستید راهنماییم کنید:
سوال اول
در وبلاگ من کد آخرین مطالب در پایین صفحه هست و بصورت افقی چطور اون رو به سمت راست وبلاگ بیارم و مثل دیگر سایتها و وبلاگها:
http://earn1sec.mihanblog.comمن طبق عکس پایین دو جابه جایی می خواستم انجام بدم
یکی عنوان سایت
و دیگری بلوک سرچ
http://upload7.ir/images/63755705721460500569.jpgقالب:
http://uploadtak.com/images/y5999_New_Text_Document_2.rarمتاسفانه به دلیل کمبود فرصت، امکان انجام تغییرات سفارشی برای کاربران وجود ندارد، لطفا با یک طراح قالب موضوع را مطرح کنید یا اینکه وقت بگذارید و CSS را یاد بگیرید.
۲۰:۳۰ ۱۳۹۲/۰۵/۱۱
سلام بنده مشکلی دارم که تا الان هیچ کس نتونسته حلش کنه
سوال راجع به بلوک تبلیغاتی بلاگم داشتم
این عکس رو مشاهده بفرمایید
طبق فلش می خوام اون عکس بیاد سمت راست ولی نمیاد
چجوری حرکتش بدم؟
padding , .. تمامی بلوک های تبلیغاتی وبلاگ رو تغییر میده
سوال راجع به بلوک تبلیغاتی بلاگم داشتم
این عکس رو مشاهده بفرمایید
طبق فلش می خوام اون عکس بیاد سمت راست ولی نمیاد
چجوری حرکتش بدم؟
http://www.8pic.ir/images/83040855789582935954.jpgpadding , .. تمامی بلوک های تبلیغاتی وبلاگ رو تغییر میده
<div class="adblock">
<a href="https://alliexfinancial.com/?ref=rapidleech"><img
src="https://alliexfinancial.com/images/alliex160x600.gif" alt="دریافت 15% سود پس از هفت روز"/></a>
</div>می توانید به روش های زیر این کار را انجام دهید:
- استفاده از تگ center در HTML (توصیه نمی شود):
- استفاده از تگ center در HTML (توصیه نمی شود):
<div class="adblock">
<center>
<a>...</a>
</center>
</div><div class="adblock" style="padding-left:12px; text-align:right;">
<a>...</a>
</div><style type="text/css">
#adblock_special{
padding-left:12px;
text-align:right;
}
</style>
<div class="adblock" id="adblock_special">
<a>...</a>
</div>
صفحه 2 از 3 محتوا در وبگو به صورت تألیفی تهیه می شود و دارای حق تألیف است، در صورت نیاز به کپی برداری لطفا ابتدا "شرایط استفاده" را مطالعه کنید.
خدمات و راه های ارتباطی ما صرفا تحت دامنه Webgoo.ir ارائه و اطلاع رسانی می شوند، صفحات یا عناوین مشابه مورد تائید نمی باشند.
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.