Html, CSS - Weird Invisible Margin Below Pictures

Mysterious Padding / Margin Around Images

I think this is because the img elements are inline. Setting the font-size or line-height to something small fixes this. Alternatively, set the images to display: block and set a height on them.

How to make NO margin or spacing in between images in a gallery using HTML and CSS

div.gallery {     width: 470px;    display: inline-grid;    }div.gallery img {    width: 100%;    height: auto;margin-bottom: -5px;}
.gallery-all {    text-align: center;}

    <div class="gallery-all">    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>        <!-- SECOND LINE -->    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    <div class="gallery">  <a target="_blank" href="img_fjords.jpg">    <img src="https://www.w3schools.com/css/img_fjords.jpg" alt="Trolltunga Norway" width="300" height="200">  </a></div>    </div>

Image inside div has extra space below the image

By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.

There is space below that line for the descenders you find on letters like g, j, p and q.

Demonstration of descenders

You can:

adjust the vertical-align of the image to position it elsewhere (e.g. the middle) or
change the display so it isn't inline.

div {  border: solid black 1px;  margin-bottom: 10px;}
#align-middle img {  vertical-align: middle;}
#align-base img {  vertical-align: bottom;}
#display img {  display: block;}

<div id="default"><h1>Default</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>
<div id="align-middle"><h1>vertical-align: middle</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>    <div id="align-base"><h1>vertical-align: bottom</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"> </div>
<div id="display"><h1>display: block</h1>  The quick brown fox jumps over the lazy dog <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f2/VangoghStarry-night2.jpg/300px-VangoghStarry-night2.jpg" alt="Sample Image"></div>

Image inside a floated container: Odd whitespace at the bottom

Check out Images, Tables, and Mysterious Gaps on MDN. The image is inline and sitting on the baseline. The space below is reserved for the descenders in text.

Setting the image to display: block will solve your issue though the aforementioned article is a good read.

How to fix invisible margin parameter?

It's different on other OS'.. so you should style your scrollbar

Made a quick sample:

::-webkit-scrollbar-track {
  display: none;
}

https://jsfiddle.net/p4mc70go/1/

invisible a appears on the bottom of my clickable image icons, how to get rid of it?

You can add them in an unordered list like this. The reason that's happening because you're resizing the child which is the image here and that makes the parent a takes the size of it img. So by resizing the a instead, it should be fine.

      <div id="smallbuttons">
        <ul>
          <li>
            <a href="https://github.com/" target="_blank" rel="noopener noreferrer">
              <img id="github" src={require("./github.png")} alt="Github" />
            </a>
          </li>
          <li>
            <a href="https://www.linkedin.com/" target="_blank" rel="noopener noreferrer">
              <img id="linkedin" src={require("./linkedin.png")} alt="LinkedIn" />
            </a>
          </li>
        </ul>
      </div>

CSS

#smallbuttons{
  display: flex;
  width: 100%;
  position: fixed;
  z-index: 200;
  overflow-x: hidden;
  padding: 8px 0;
}
#smallbuttons ul {
  list-style-type: none;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  }
#smallbuttons ul li a {
  width: auto;
  height: 3vh;
  color: #fff;
  text-decoration: none;
  padding: 8px;
  display: block;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
 }

#github, #linkedin {
  height: inherit;
  width: auto;
}

Weird space between navbar pictures and picture

Images are aligned to baseline by default and are treated similarly to inline elements, so there is a little space at the bottom for the trailing characters in inline content. To remove it, use a different vertical-align value. Added vertical-align: top to those imgs.

*{padding:0;margin:0;}body{background-color:#242628;}.logo{margin:0;padding:0;}.logo img{float:left;margin-top:0.6%;margin-left:1%;margin-bottom:0;width:280px;height:75px;}.head{padding:0;margin:0;}.head ul{float:right;list-style-type:none;padding:0;margin:0;}.head ul img{width:100px;height:100px;padding:0;margin:0;vertical-align: top;}.head li{float:left;margin:0;padding:0}.head ul a{padding:0;margin:0;display:block;}.bakbild img{padding:0;margin:0}

<!DOCTYPE html><html><head>
    <meta charset="UTF-8"><link rel="stylesheet" type="text/css" href="css/gwfcss.css"></head>
<body><div class="head">    <div class="logo">        <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png">    </div>
    <ul>        <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>             <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>         <li><a><img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png"></a></li>    </ul></div><div class="bakbild">    <img src="http://kenwheeler.github.io/slick/img/lazyfonz3.png" style="width:100%;"></div></body></html>

Remove white space below image

You're seeing the space for descenders (the bits that hang off the bottom of 'y' and 'p') because img is an inline element by default. This removes the gap:

.youtube-thumb img { display: block; }