CSS проблема с padding

[jamce123]

Не могу понять почему граница блока тега a, вылезает за границу дива. Есть вариант сделать див позишн relative, а второй absolute, но тогда нужно позиционировать каждую ссылку.

.mes { 
width: 1000px; height: 100px; 
border: 1px double black; 
position: relative;}

.mes a{ 
padding: 60px 10px 10px 10px; 
border: 1px double black; 
text-decoration: none;}

---------- Post added at 14:03 ---------- Previous post was at 12:21 ----------



UPD:
Проблему решил, но весьма шаманским способом.

вставил внутрь дива mes, еще один див fer. Так вот, внутри этого дива стало все ок, эти два блока ссылками перестали выходить за границы.

<div class="mes">
  <div class="fer">
  <a href="#">.mes a</a>
  <a href="#">.mes a</a>
  </div>
</div>

Если, кто знает в чем фишка, буду рад услышать.

 

[joom-joom]

а так?

 .mes { 
width: 1000px; height: 100px; 
border: 1px double black; 
position: relative;
overflow:hidden; }

 

[Vim]

а так?

 .mes { 
width: 1000px; height: 100px; 
border: 1px double black; 
position: relative;
overflow:hidden; }

тогда проще у ссылки убрать padding-top.

.mes a{ 
padding: 0px 10px 10px 10px; 
border: 1px double black; 
text-decoration: none;}

или сделать из ссылки блочный элемент и двигать float

 

[Delk0]

display: block; для тега а сразу решит проблему

 

[МихалычЪ]

А почему бы не использовать display:inline-block на a