qartalonline
شنبه 14 تیر 1393, 12:36 عصر
خیر راهی نیست چون border همانطور که از اسمش پیداست حاشیه هستش حاشیه هم بعد از ارتفاع و عرض حساب میشه.
البته برای کاری شما میخواین انجام بدین ترفندی وجود داره مثلا فرض کنید که تگ li دارید که داخلش تگ a هستش و میخواهید برای هر لینک در سمت راست یا چپ border داشته باشید که ارتفاع شون کمتر از ارتفاع لینک ها باشه برای اینکار به تگ li حاشیه بدید و ارتفاع li رو از ارتفاع تگ a کمتر کنید.
نمونه:
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<meta charset="UTF-8">
<style type="text/css">
#nav li{
list-style: none;
display: block;
float: right;
border-left: 1px #017030 solid;
height: 20px;
}
#nav li:last-child{
border: none;
}
#nav li a{
display: block;
height: 30px;
margin: 0 5px;
margin-top: -5px;
line-height: 30px;
padding: 0 10px;
}
#nav li a:hover{
background-color: darkseagreen;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="#">صفحه ی اصلی</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">تماس با ما</a></li>
</ul>
</body>
</html>