<div class="num_wrap">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
...
<a href="#">20</a>
</div>

이렇게 주시고 이게 페이지 번호라던가 그러면 <ul><li> 단위로 하셔야 할수도있겠죠.

css부분은
.num_wrap {width:400px}
.num_wrap a {display:inline-block; padding: 7px 10px; float:left; border:1px solid #ccc}
정도 해주시면 이미지 그리신거랑 비슷하게 나오겠네요.

답변감사합니다 . 1 2 사이에 여백을 줄수는 없는가요 현재 붙어서 출력 되는데요.그리고 아래 위도 여백을 줄수 없는가요

기본적인 구조만 알려드린것이고 이런부분들은 변경되는 경우가 허다합니다.
여백은 보통 margin과 padding으로 조절들 많이 하시고 레이어 구조에 따라 left, right, top, bottom도 사용됩니다.
기초 css <--라고만 치셔도 참고문헌이 엄청납니다.