ここでのdisplay:block;の役割

ここでの.ranking .ranking-item aへのdisplay:block;の指定の役割がわかりません
a要素のクリック領域を広げるためか、縦並べにするためかと思ったのですが、display:block;を外してみてもそれは変わりませんでした　
display:block;の効果なども
調べてましたが、今回の件に関係するようなことが見当たらず困っています
コードはレイアウト技術書のものです　他のセクションでのコーディングの解説では
a要素にdiplay:block;を指定する理由がいくつか載っていました
（2行目の理由や幅や高さを指定するためなど）
が、今回はなんの説明もありませんでした　

HTML
1<!DOCTYPE html>
2<html lang="ja" >
3  <head>
4    <meta charset="utf-8">
5    <title>スタンダードレイアウト</title>
6    <link rel="stylesheet" href="css/reset.css">
7    <link rel="stylesheet" href="css/style.css">
8  </head>
9  <body>
10   
11    <div class="wrapper">
12    
13      <div class="sidemenu">
14        <h2 class="heading">RANKING</h2>
15        <ol class="ranking">
16          <li class="ranking-item">
17           <a href="#">
18            <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
19            <span class="order"></span>
20            <p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向
21            をチェックしよう</p>
22           </a>
23          </li>
24          <li class="ranking-item">
25           <a href="#">
26            <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
27            <span class="order"></span>
28            <p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向
29            をチェックしよう</p>
30           </a>
31          </li>
32          <li class="ranking-item">
33           <a href="#">
34            <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
35            <span class="order"></span>
36            <p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向
37            をチェックしよう</p>
38           </a>
39          </li>
40          <li class="ranking-item">
41           <a href="#">
42            <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
43            <span class="order"></span>
44            <p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向
45            をチェックしよう</p>
46           </a>
47          </li>
48          <li class="ranking-item">
49           <a href="#">
50            <img class="image" src="./images/ranking.jpg" alt="グラフの画像">
51            <span class="order"></span>
52            <p class="text">HTML/CSSコーディングと切っても切れないWebブラウザのシェア動向
53            をチェックしよう</p>
54           </a>
55          </li>
56        </ol>
57      </div>
58       
59  </body>
60</html>
61

CSS
1*{box-sizing: border-box;}
2html{font-size: 62.5%;}
3body{color: #333;
4font-size: 1.2rem;
5font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
6}
7a:link,a:visited,a:hover,a:active{
8color:#d03c56;
9text-decoration: none;
10}
11
12
13
14.ranking{
15  margin-bottom:30px;
16  list-style-type: none;
17  counter-reset:ranking;
18}
19
20.ranking .ranking-item{
21  margin-top: 15px;
22}
23
24.ranking .ranking-item a{
25  display: block;
26  font-size:0;
27  transition:opacity 0.15s;
28}
29
30.ranking .ranking-item a:hover{
31  opacity:0.8;
32}
33
34.ranking.image{
35  width:55px;
36  height:55px;
37}
38
39.ranking .text{
40  display: inline-block;
41  width:182px;
42  color:#000;
43  vertical-align: top;
44  font-size:1.2rem;
45  line-height:1.5;
46}
47
48.ranking .order{
49  display:inline-block;
50  width:18px;
51  height:18px;
52  margin:0 10px;
53  border: 1px solid #ccc;
54  color:#aaa;
55  vertical-align:20px;
56  text-align:center;
57  font-weight:bold;
58  line-height: 16px;
59  transform: rotate(45deg);
60}
61
62.ranking .ranking-item:nth-of-type(1) .order,
63.ranking .ranking-item:nth-of-type(2) .order,
64.ranking .ranking-item:nth-of-type(3) .order {
65  border:none;
66  color:#fff;
67  font-weight:normal;
68  line-height: 18px;
69}
70
71.ranking .ranking-item:nth-of-type(1) .order{
72background-color: #dab413;
73}
74
75.ranking .ranking-item:nth-of-type(2) .order{
76background-color: #6e7b84;
77}
78
79.ranking .ranking-item:nth-of-type(3) .order{
80background-color: #a0541a;
81}
82
83.ranking .order::before{
84  counter-increment:ranking;
85  content: counter(ranking);
86  display:inline-block;
87  font-size:1.0rem;
88  transform: rotate(-45deg);
89}
90
91.clear{clear:both;}
92