How do I remove these unwanted lines from my HTML/CSS project?

Question

I want to show these images on my personal website in a horizontal row, but I'm getting these small unwanted lines at the bottom between my images.

.

Here is my HTML:

<div id="container">
    <div id="left">
        <h1 id="name">My Name</h1>
    </div>
    <div id="right">
        <a href="link to github">
            <img class="imgLink" src="resources/images/github.png">
        </a>
        <a href="link to linkedin">
            <img class="imgLink" src="resources/images/linkedin.png">
        </a>
        <a href="mailto">
            <img class="imgLink" src="resources/images/email.png">
        </a>
    </div>
    <div id="center">
        <img src="resources/images/profile.jpg" id="avatar">
    </div>
</div>

Here is my CSS:

div { 
    width: 100%; 
    height: 25%; 
    float: left; 
}

.imgLink {
    height: 100px;
    width: 100px;
}

#right {
    float: right;
    width: 33%;
    height: 100%;
    background-color: green;
}

Where did you get those images? You may want to open them in Photoshop or something similar to see if it's an actual part of the images. — Jeff Berlin, May 06 '20 at 19:20
I got them from Flaticon.com. I've opened the images in other programs, and the lines are not there. — Jack Wu, May 06 '20 at 19:22
vertical-align:top on the image should fix your issue without changing the code or removing whitespace — Temani Afif, May 06 '20 at 19:40

score 1 · Answer 1 · answered May 06 '20 at 19:22

1

The tiny lines appear to be links. To remove them try :

#right a {text-decoration:none;}

answered May 06 '20 at 19:22

rawnewdlz

1,221
1
17
24

score 1 · Accepted Answer · answered May 06 '20 at 19:26

The lines are from the spaces in your code. Inline elements are sensitive to whitespace, so removing them removes the lines.

For example, change:

<a href="link to linkedin">
    <img class="imgLink" src="resources/images/linkedin.png">
</a>

To:

<a href="link to linkedin"><img class="imgLink" src="resources/images/linkedin.png"></a>

Matt Saunders · Answer 3 · 2020-05-06T19:36:07.100

0

Try adding:

display:block;

to class .imgLink in your css. This should actually remove the gap (and the underline), rather than just removing the underline.

This is often desirable where you want to accurately adjust padding and margin between objects.

You can then add:

#right a{
    float: right;
}

Which should provide the layout you want, but without the gap between icons.

If you want a gap, you can set with margins and know it will be accurate.

edited May 06 '20 at 19:36

answered May 06 '20 at 19:21

Matt Saunders

3,538
2
22
30

This seems to solve the lines issue, but now my horizontal components are stacking vertically. – Jack Wu May 06 '20 at 19:25
Always lots of ways to do these things! Have updated my answer. This removes the white space (as per the other answer) without having to change the indentation of your code. – Matt Saunders May 06 '20 at 19:31

How do I remove these unwanted lines from my HTML/CSS project?

3 Answers3