Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Why Is There A Space In Between The Ul And First Li Element?

Post a Comment
The space is not between the inline block elements. it's happening before the first li and after the last li. The padding does not add up to 100% because of this. I have tried remo

Solution 1:

There's a couple reasons for your mysteriously additional space:

  1. You are using an unordered list item (ul) which gets a small padding by default from most browsers.
  2. You are adding your own padding to your ul and li elements.

Solution

Remove your paddings on your li and ul styles and use flexbox. Simply apply a display: flex; on the parent element, then flex (flex: 1) each child element. Now they should always fit perfectly into the the parent container, no matter how big or small your screen resizes. Using flexbox also means you no longer have to go through the pain of adding up your percentages to ensure that you use 100%.

header {
  width: 100%;
}

body {
  margin: 0;
  height: 100%;
}

#page {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

#backgroundimg {
  display: none;
  opacity: 0.4;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#navpane {
  text-align: center;
  height: 60px;
  width: 100%;
  background: #d7dfed;
  position: absolute;
  opacity: 0.4;
  top: 0;
}

#options {
  list-style: none;
  max-width: 100%;
  margin: 0;
  display: flex; //add this
  //padding: 010%; ---> remove this
}

.option {
  display: inline-block;
  flex: 1; // add this
  //padding: 010%; ---> remove this
  margin: 0;
  text-align: none;
}

#optionsa {
  float: left;
  font-size: 30px;
  padding: 15px0px;
}

#shirtdrop {
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#shoedrop {
  max-width: 140px;
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#pantsdrop {
  background-color: inherit;
  outline: none;
  border: none;
  padding: 0;
}

#photochanger {
  position: absolute;
  height: 20%;
  width: 70%;
  border: black;
  border-width: 1px;
  border-style: solid;
  bottom: 45%;
  left: 15%;
}
<!DOCTYPE HTML><htmlid="page"><head><metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"><linkrel="stylesheet"href="stylesheet.css"><scriptsrc="script.js"></script><scriptsrc="jquery.js"></script></head><body><imgid="backgroundimg"onload="fadeIn(backgroundimg)"src="C:\Users\Jessica and Larry\Desktop\Projects\Test Template 1\img\background1.jpg"><divid="navpane"><divid="options"><divclass="option"><buttonid="shirtdrop"><a>Shirts</a></button></div><divclass="option"><buttonid="shoedrop"><a>Pants</a></button></div><divclass="option"><buttonid="pantsdrop"><a>Shoes</a></button></div></div></div><divid="photochanger"><img></div></body></html>

Post a Comment for "Why Is There A Space In Between The Ul And First Li Element?"