ورود

admin

برای هر بخش ، دو مشخصه به نام های margin و padding داریم . برای درک تفاوت بین آنها ، ابتدا خط کادر دور یک بخش صفحه را در نظر بگیرید و درون آن بخش هم فرض کنید که یک متن نوشته شده باشد . مشخصه padding برای تعیین فاصله بین نوشته تا خط کادر می باشد و مشخصه margin نیز برای تعیین فاصله بین خط کادر تا سایر بخش های دیگر اطراف این بخش می باشد .
در واقع padding برابر حاشیه داخلی و margin برابر حاشیه خارجی می باشد . همچنین باید دقت کنید که این دو مشخصه را برای چه تگی در html به کار می برید .
دستورات زیر رو در نظر بگیرید :

کد:
padding-left:2px;

padding-right:2px;

padding-top:2px;

padding-left برای میزان حاشیه داخلی نسبت به سمت چپ می باشد و در واقع کلمه left نشان دهنده جهت حاشیه داخلی تعریف شده است که بعد از کلمه padding آمده است . دو مورد دیگر نیز برای سمت راست و قسمت پایین به کار رفته اند .
البته به جای کدنویسی بالا می توان از کد خلاصه تر زیر استفاده نمود :

کد:
padding: 2px 2px 2px 2px;

که در آن 4 عدد نوشته شده است که مربوط به padding برای هر 4 جهت می باشد .

برای وسط قرار گرفتن ، می توانید از مشخصه text-align استفاده کنید ، مثلا کدهای زیر را در یک صفحه html کپی کنید و نتیجه را مشاهده کنید :

کد:
<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">

ul.sidebar2_menu {

                  list-style:none;

                  text-align:center;

                  }          

ul.sidebar2_menu li a {

                       text-decoration:none;

                       display:inline-block;

                       width:190px;

                       background-color:#0FF;

                       padding:2px;

                       padding-right:4px;

                       border-style:solid;

                       border-width:1px;

                       border-radius:7px 7px 7px 7px;                 

                      }

 ul.sidebar2_menu li {                  

                     padding-left:0px;

                     padding-right:0px;

                     padding-top:3px;

                     }    

 .sidebar2_menu a:hover {

                        background-color:#0F6; 

                        border-radius:7px 7px 7px 7px;

                        }

</style>

</head>

<body>

<ul class="sidebar2_menu">

<li><a href="matlab/index.php">آموزش متلب</a></li>

<li><a href="html/index.php">آموزش html</a></li>

</ul>

</body>

</html>

مشاهده خواهید کرد که در وسط صفحه نمایش داده می شود ، اما اگر مشخصه text-align را حذف کنید دیگر در وسط قرار نمی گیرد .

ورود
نام‌کاربری:
رمزعبور:	فراموشی رمزعبور
	مرا به‌خاطر بسپار.

انجمن سایت کلیدستان

نحوه قرار دادن کادر