CODEWITHSUNDEEP
phphtmlcss
Alexiz Hernandez
Alexiz Hernandez

Reputation: 579

Why is there white space on the top and bottom of a link?

I have an h3 tag surrounded by an anchor tag but there is a lot of white space on the top and bottom of the text that I can't seem to get off. I will post the code I have and an image of how it looks.

HTML/PHP:

echo
'<div class="entertainment-loc-cont">
    <a href="' . $object['link'] . '"><h3 class="entertainment-title">' . $object['title'] . '</h3></a>
    <a href="' . $object['link'] . '"><img src="' . $object['img_link'] . '" /></a>
        <div class="entertainment-info">
            <p class="entertainment-line-1">' . $object['line_1'] . '</p>
            <p class="entertainment-line-2">' . $object['line_2'] . '</p>
            <p class="entertainment-line-3">' . $object['line_3'] . '</p>
            <p class="entertainment-line-4">' . $object['line_4'] . '</p>
            <p class="entertainment-line-5">' . $object['line_5'] . '</p>
        </div>
</div>';

CSS:

.entertainment-loc-cont {
    width: 100%;
}
.entertainment-loc-cont img {
    width: 100%;
}
.entertainment-loc-cont a {
    font-size: 2.5em;
    text-decoration: none;
}
.entertainment-title {
    color: #000000;
}

RESULT: enter image description here enter image description here

Upvotes: 4

Views: 91

Answers (2)

Stickers
Stickers

Reputation: 78676

The white space you see is the default margin on the <h3> from browser default style, also caused by collapsing margins.

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin. 8.3.1

To fix that you could set h3 {margin-top:0; margin-bottom:0;}

Although it is valid in HTML5 to wrap <h3> into <a> tag, but it's recommend to avoid that if you wish it to work properly in old browsers.

I would prefer to do it like this: <h3><a href="#">Text</a></h3>

And set a {display:block;} if you want the link to also occupy the entire width avaiable.

Upvotes: 1

Kevin Kopf
Kevin Kopf

Reputation: 14195

According to W3 specifications, the default css values for <h3> tag are as following:

h3 {
    display: block;
    font-size: 1.17em;
    margin-before: 1em;
    margin-after: 1em;
    margin-start: 0;
    margin-end: 0;
    font-weight: bold;
}

If you wish to change it, override it in your css, the simplest way:

h3 { margin: 0; }

Upvotes: 2

Related Questions