Ash Ash - 7 days ago 5
HTML Question

How do I fix these gaps between each list item?

I am creating a portfolio for myself and I am struggling with these list items. I want them to be the same height and inline with each other. In each list item there is one extra line and I believe that is what is causing it. How would I fix this?

Here is what it looks like:
Picture of the problem



#content-wrapper {
background-color: #EBEBEB;
margin: 0 auto;
width: 100%;
border-top: 2.5px solid #0F0F0F;
}
#content-wrapper ul {
list-style-type: none;
margin: 0 auto;
width: 100%;
padding: 0;
text-align: center;
}
#content-wrapper ul li {
background-color: whitesmoke;
color: #1B1B1B;
text-align: center;
display: inline-block;
margin: 5px 2.5px;
width: 45%;
}
#content-wrapper ul li p {
padding: 10px;
height: 150px;
}
#content-wrapper ul li img {
width: 100%;
}

<div id="content-wrapper">
<ul>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio.</p>
</li>
<li>
<img src="http://ashleye.co.uk/img/portfolio-1.png">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo ligula, placerat at interdum vitae, maximus id leo. Donec pellentesque, leo sed aliquet vulputate, orci dui commodo tellus, et tempus nunc nulla quis diam. Vivamus diam neque, pellentesque
at euismod et, tincidunt vitae eros. Vivamus mi justo, volutpat ut nisl sed, dictum pellentesque odio. Nunc metus quam, rutrum sed metus convallis, egestas sodales quam.</p>
</li>
</ul>
</div>




Answer

there is another version of your code for you. everything is in line here.

any other questions, just ask :)

  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
  <div class="project">
     <img src="http://ashleye.co.uk/img/portfolio-1.png">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>

body{
  margin:0;
  padding:0;
}
#wrapper{
  width:100%;
  height:2000px;
  background:#eee;
}
#portfolio{
  width:900px;
  height:1200px;
  margin:auto;
}
.project{
  width:47.5%;
  height:400px;
  background:#fff;
  float:left;
  margin:10px 2.5% 0 0;
}
.project img{
  width:80%;
  height:auto;
  margin-left:10%;
}
.project p{
  text-align:center;
}

http://codepen.io/raze444/pen/mOBjOx?editors=1100

Comments