CODEWITHSUNDEEP
htmlcss
hayley
hayley

Reputation: 406

Why my div is not expand as the text content

here's my code below. I want to make an anchor link which has a gary background div behind it, here's my way:

<div style="text-align: center; background: #F0F0F0; width: 200px; margin: 0 auto; padding: 8px;">
    <span style="color: #604c8d; font-weight: 300;">
        <a href="#">CLICK HERE</a>
    </span>
</div>

My problem is why the height of the div is not expaneded as the text content? The reason why you can see gray background behind is because I added padding on it. If I remove the padding part, the gary background disappears. I did not do anything else such as floating or absolutely positioning. Can anyone help me?

Upvotes: 2

Views: 55

Answers (1)

Liang
Liang

Reputation: 515

In modern HTML, you can wrap <a> out of almost any tags you want, I set the <div> to inline-block, so it doesn't occupy the full width and it needs a wrapper to align it to center.

 <div style="text-align: center">
    <a href="#">
      <div style="text-align: center; background: #F0F0F0; width: 200px; padding: 8px;display: inline-block;">
        <span style="color: #604c8d; font-weight: 300;">
           CLICK HERE
        </span>
      </div>
    </a>
</div>

Upvotes: 1

Related Questions