White Space At Bottom of Anchor Tag

White space at bottom of anchor tag

The image is display: inline so it is treated like a character and sits on the baseline. The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).

Adjust the vertical-align with CSS: img{vertical-align: bottom}

css - remove white space below anchor tag

You're using flexbox on your .top-page-container element, with a min-height. This is then correctly forcing the child element to occupy the full container height.

Add the align-items property of .top-page-content with something like flex-start, center, etc.

.top-page-container {    padding: 15px 20px;       margin: 0;    min-height: 30px;    height: auto;    width: 100%;    border-bottom: 1px solid #000;    align-items: flex-start; // <-- add this    display: flex;    justify-content: space-between;}
.top-page-container a {    /*display: block;*/    /*height: auto;*/    vertical-align: bottom;    padding: 3px;    margin: 3px;    font-size: 1.75em;    /*padding: 15px 0px;*/    color: #000;}
.top-page-container .social-links {    font-size: 1.75em;    /*padding: 15px 0px;*/}

<div class="top-page-container">    <a href="/">Canova's Analytics Dashboards</a>
    <div class="social-links">        <a href="https://twitter.com/SmokeyCanova">            <FaTwitter />        </a>    </div></div>

HTML/CSS: div, anchor and image tag with space below

Try adding a { float:left } or a { vertical-align: middle }

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

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; }

CSS unwanted spacing between anchor-tag elements

You need to remove the whitespace (in this case the newline) between your tags. Some browsers render it as a space.

Why there is a strange white space above the body tag?

You are not clearing the floats so you can ignore them to understand your issue.

You have an empty ul having bottom margin. That margin will collapse with the bottom margin of the body then the body is also empty so both its top and bottom margin will collapse and we end with one margin equal to 50px applied to the body.

That margin will end as a top margin for the body and this is pushing the float content to the bottom.

Here is another illustration to understand what is happening

.box {
  border:5px solid;
}

.box * {
  outline:2px solid red;
}

<div class="box">
  <div>
    <div style="margin-bottom:50px;"></div>
  </div>
</div>

How can I remove the padding of this anchor tag around the images?

Control the width of the flex item, not the image.

More specifically, set the flex item to your preferred width, then make the images inside take full width (width: 100%).

Instead of this:

.thumbs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
}

.portfolio a {
    margin: 0 auto;
    text-align: center;
}

.thumbs img{
    width: 60%;
    padding: 0 !important;
}

Try this:

.thumbs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 2%;
}

.portfolio a {
    flex: 0 0 25%; /* new; flex-grow: 0, flex-shink: 0, flex-basis: 25% */
    /* margin: 0 auto; */
    /* text-align: center; */
}

.thumbs img {
    width: 100%; /* new */
    padding: 0 !important;
    vertical-align: top; /* optional; to remove descender space;
                            https://stackoverflow.com/q/31444891/3597276 */
}

https://codepen.io/anon/pen/pWVmzy

Extra space above anchor tag?

That is because the ↠ character just has a lot of space above and below it.

You get similar results with _, for example.

I've come up with three solutions so far:

1. `clip-path`

You can use clip-path to "remove" the blank areas of your tag, but Firefox and IE do not currently support clip-path with shapes.

display: inline-block;
-webkit-clip-path: inset(47% 0% 25% 0%);
clip-path: inset(47% 0% 25% 0%);

47% 0% 25% 0% (read: remove 47% from top and 25% from bottom) is the approximate area that is blank in the the ↠ character.

This has the advantage of not breaking when you decide to change the font size, but it won't work in all browsers (yet). [Fiddle]

(If positioning relative to the line matters, you should be able to use position: relative and top or bottom to get the desired alignment.)

2. Fixed size + `overflow`

A cross-browser solution is to make it an inline-block, set overflow: hidden and fiddle with line-height and height. I found these values work pretty well, but they're basically random:

display: inline-block;
overflow: hidden;
line-height: 20px;
height: 32px;

Should work in all browsers, but you have to fiddle with the values again if you change the font size. [Fiddle]

3. Images

I originally wanted to suggest using images instead of text, but realised it wouldn't be that trivial if you want the color to be animated.

But it is actually still quite simple, you just have an outer element with a background image (cyan arrow), containing an img tag (black arrow), on which the opacity is animated from 1 to 0 on hover.

This works cross-browser too and has the advantage of correctly showing up even in browsers/on machines that do not support that character, but of course you have to create two new images every time you want to change anything. [Fiddle]

(In production, you should probably not inline images though.)

White Space At Bottom of Anchor Tag