Imamadmad Imamadmad - 6 months ago 7
CSS Question

Alignment off: A gap between inline-block elements with nothing in it

I have a pseudo-grid of inline-block elements to display on my homepage, but there is a gap between two of them which I cannot account for. There is no element, no margin, no br, no nothing that I can find between these elements forcing them apart. The inspect tools for Chrome are just highlighting the container behind when I mouse into the gap. I've tried fiddling with the margins, but I haven't managed to get the top left element (New Booking) to play nicely with the one under it (Membership Plan). The margins of all the other elements are nicely spaced as I want them to be.

Fiddle with the code displaying the problem: https://jsfiddle.net/8b779myb/

Any suggestions?



.home-container {
margin-top: 120px;
width: 800px;
}
.home-container a {
display: inline-block;
color: black;
text-decoration: none;
width: 350px;
height: 100px;
margin: 10px;
padding: 10px;
border: solid 1px #25561B;
background-color: #F9FBF9;
}
.home-container a h2 {
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
margin: 10px;
}
.home-container #new-booking {
height: 242px;
float: left;
}
.home-container #new-booking #car-new-booking {
display: block;
width: 250px;
margin: 10px auto 20px;
}
.home-container #next-booking {} .home-container #all-bookings {} .home-container #membership-plans {} .home-container #browse-bays {}

<div class="home-container">
<a id="new-booking" href="/new-booking">

<img id="car-new-booking" src="{{ url_for('static', filename='images/car-new-booking.png') }}" alt="new-booking-image" />
<h2>New Booking</h2>
</a>
<a id="next-booking">
<h2>Next Booking:</h2> Time, Car, Bay
</a>
<a id="all-bookings" href="/my-bookings">
<h2>View All Bookings</h2>
<br />Bookings to Date: {{ user.num_bookings }}
</a>
<a id="membership-plans">
<h2>Membership Plan:</h2> {{ user.plan }}
</a>
<a id="browse-bays" href="/list-bays">
<h2>Browse Bays</h2>
<br />Home Bay: {{ user.homebay }}
</a>

</div>




Answer

Add this;

.home-container #membership-plans {
    float:left;
}

It will make the space between the element the same as the rest of your elements. It was just being pushed to the left previously by the other a's you've used. With the added code the element is supposed to be left and that's why it fixed your spacing issue.

https://jsfiddle.net/8b779myb/

Comments