Здесь вы найдете ответ на вопрос, как сделать ссылкой не только строку текста, а весь блок целиком.

Довольно часто необходимо сделать кликабильным не только текст ссылки, но и весь блок. Например настраивать для менюшку или прочую навигации по сайту. Хочу отметить тот факт, что мы будем рассматривать случай, когда не создается просто блок с заданными размерами, состоящий из тега ссылки а. мы будем расширять этот контейнер до размеров родительского блока. Это будет более грамотно с точки зрения семантики.

Чтобы реализовать нашу задумку, в первую очередь необходимо для ссылки определить свойства блочного элемента, используя свойство display. Благодаря этому ширина рассматриваемого контейнера растянется до размеров родителя — это одно из характерных свойств блочных элементов. Для того, чтобы растянуть ссылку по высоте родителя, необходимо воспользоваться свойством height, для которого определим значение 100%. Вот таким образом должен будет выглядеть код:

CSS

a {
     display: block;
     height: 100%;
}

В браузере выскочит такая картина

Синим помечен блок с ссылкой. При клике на любую точку в синей зоне произойдет переход по заданному адресу.