CODEWITHSUNDEEP
htmlcss
luxi
luxi

Reputation: 317

Why does a link overlap the text?

This is the HTML:

<div>
    <p>
        We bring you the latest in entertainment & information services, right on your phone. From the latest of Bollywood to the futuristic applications, get it all here!
        <a href="#">View All</a>
    </p>
</div>

And this is the CSS....

div{width: 350px;}
a{
    padding: 30px;
    background: red;
    margin: 20px;
    border-radius: 12px;
    background: red;
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
}

I know this could be solved by using display: inline-block; in .a. But I would like to know why this is overlapping the text? Should it not to go beyond the text?

DEMO1

DEMO2 now a is within a block level of p.

And also have a look at this DEMO. Img is also an inline element. And why this is not overlapping, this should also be overlapping, right?

Upvotes: 1

Views: 3223

Answers (6)

xkeshav
xkeshav

Reputation: 54016

Add the below property in a.

  position:relative;
  float:left;

Working DEMO

TIPS:

  1. Write background-color instead of the shorthand background when you are not associating any other property.

  2. If you write display:block then the block width will be equal to the parent width, so always write width with display.

    a{
    padding: 30px;
    background-color: red;
    margin: 20px;
    border-radius: 12px;
    color: #fff;
    font: bold 12px Arial, Helvetica, sans-serif;
    text-decoration: none;
    display: block;
    width: 50px;
}

    DEMO

Upvotes: 0

Navin Rauniyar
Navin Rauniyar

Reputation: 10525

<a> tag is inline level but while <img> tag is both inline and block level specially inline-block. So <a> tag is overlapping because of inline level which is corresponding to the text but <img> tag won't overlap because it is behaving inline-block. And you may know the difference between them.

Reference: Is <img> element block level or inline level?

An inline element could not be set its width and height and even doesn't work correctly the margin behaviour what actually should do. The margin is applied only to left or right side. Actually this is why, inline element here <a> tag would not set its width and height and remain in same line and seems to be overlapped when applied padding values.

The following picture makes you clear to understand about inline vs inline-block

inline-block vs inline

View Live Demo

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191729

This actually is explained in the W3C spec, although it was a bit tricky to find.

Horizontal margins, borders, and padding are respected between these boxes.

This tacitly implies that vertical margins/borders/padding are not respected. It goes on to say:

The height of a line box is determined by the rules given in the section on line height calculations

If you move the <a> into the contents of the box

We bring you the latest in entertainment <a href="#">View All</a>

You can see this effect: http://jsfiddle.net/rHCNb/7/ -- the horizontal padding is respected, but not the vertical. The fact that it covers the other text has to do with z-indexing.

Upvotes: 0

Khadir Abdul
Khadir Abdul

Reputation: 1

Padding doesn't work well with inline elements.

Ref:Inline Elements and Padding

Upvotes: 0

Artless
Artless

Reputation: 4568

The initial value for the display property on a link is display: inline. This means that it will try to fit in with the text and will accept horizontal margins, and padding on all sides, which is exactly why your link overlaps the text. In order for it to accept vertical margins (so it doesn't overlap), you need to set it to display:block or inline-block if you want it to align with the text still.

Upvotes: 0

Cezary Wojcik
Cezary Wojcik

Reputation: 21845

It's overlapping because the default behavior for an <a> tag is to fit with the text. If you want it to behave like a block, then set display: block.

Upvotes: 2

Related Questions