Christopher Christopher - 6 months ago 18
HTML Question

HTML White space between image and scrollbar in a <ul>

firstly I am including an image for clarity sake

enter image description here

It is the white space in between the scrollbar and the images that I am trying to eliminate. My reason for this is that I want to have three scrolling unordered lists in-line with eachother, as shown in the code.

<!DOCTYPE html>
<html>
<style media="screen" type="text/css">

nav ul
{
height:500px; width:43%;
overflow:hidden;
overflow-y:scroll;
overflow-x:scroll;
display: inline-block;
padding: 5px;
}


ul
{
float:left;
margin:0 5px;
list-style-type: none;
}

img
{
width = 100%;
}
body
{
margin = 0;
}

</style>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header>header area</header>

<nav>
<ul>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

</ul>
<ul>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

</ul>

<ul>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>
<li><img src="http://www.w3schools.com/html/pic_mountain.jpg"></li>

</ul>
</nav>

<footer>footer area</footer>
</body>
</html>

Answer

Problem

img is an inline element, so set it as display:block (or vertical-align:bottom given it is by default vertical-align:baseline)

Notes

  • you have 2 typos:

body{margin=0} and img{width=100%}, should be with :

  • added code to make your lists alongside with each other

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}

.cf:after {
    clear: both;
}
nav ul {
  height: 500px;
  width: calc((100% / 3) - 10px);
  overflow: hidden;
  overflow-y: scroll;
  overflow-x: scroll;
  display: inline-block;
  padding: 5px;
}
ul {
  float: left;
  margin: 0 5px;
  list-style-type: none;
}
img {
  width: 100%;
  display: block;
  border: 1px solid red
}
<header>header area</header>

<nav class="cf">
  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>
  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>

  <ul>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>
    <li>
      <img src="http://www.w3schools.com/html/pic_mountain.jpg">
    </li>

  </ul>
</nav>

<footer>footer area</footer>