Why are my div hyperlinks stretched across the page?

Question

This div is inside the 'page-container' div with the contents of the div inside it, but the problem can be reproduced without them (as can be seen from the script below).

HTML:

<a href="http://www.example.com"><div class="download_link">Download PDF</div></a>

CSS

.download_link {
    margin: 0 auto;
    width: 200px;
    border-radius: 5px;
    transition: 0.5s;
    background-color: lightblue;
    text-align: center;
    font-family: 'Source Serif Pro';
    font-weight: 600;
    font-size: 25px;
}

.download_link:hover {
    transition: 0.5s;
    background-color: limegreen;
}

The div line is correct and even changes color on hover. But the link extends to the entire container. I tried changing the width of all kinds.

→> Convenient JSFiddle <<

Answer 1

(div) . , , . div , . Inlines, , , . "" , , body.

, div . , , , . , , , . , .

jsfiddle: http://jsfiddle.net/hhm46/2/.

HTML:

<a href="http://www.example.com/manual.pdf">Download PDF</a>
<p>Sample paragraph</p>

CSS:

a[href $= ".pdf"] {
    display: block;
    margin: 0 auto;
    width: 200px;
    border-radius: 5px;
    transition: background-color 0.5s;
    background-color: lightblue;
    text-align: center;
    font-family: 'Source Serif Pro';
    font-weight: 600;
    font-size: 25px;
}

a[href $= ".pdf"]:hover {
    transition: 0.5s;
    background-color: limegreen;
}

Answer 2

div, . Fiddle.

 <div class="download_link"><a href="http://www.example.com">Download PDF</a></div>

Answer 3

, div . display:inline-block display:inline.

Inline Block Demo: http://jsfiddle.net/3Ld8U/2/

, @josh, a div

Answer 4

Two ways to do this:

I found a workaround for you:

<div id=wrapit style="width:200px; margin:0 auto 0 auto;">
<a  href="http://www.example.com">
<div class="download_link">Download PDF</div></a></div>

If you want the anchor tag to fall into the div, as others have recommended, I recommend that you increase the size of the anchor tag so that it extends to the edge of the borders.

.download_link a {
padding: 0 20px 0 20px;
}