CODEWITHSUNDEEP
htmlcss
Imamadmad
Imamadmad

Reputation: 77

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>

Upvotes: 1

Views: 91

Answers (3)

Ludv&#237;k Bobek
Ludv&#237;k Bobek

Reputation: 61

There are two ways of doing this:

1) as Johannes already wrote, .home-container a{vertical-align: top;} because the default value is baseline.

https://jsfiddle.net/8b779myb/1/

2) Use .home-container a{display: block; float: left;} instead of display: inline-block. Floated block elements are aligned to the top.

https://jsfiddle.net/8b779myb/2/

Upvotes: 0

Johannes
Johannes

Reputation: 67748

Add vertical-align: top; to the CSS rule for .home-container a

https://jsfiddle.net/80phu3js/

(otherwise inline-block-elements are aligned by their baseline, which by default is the lowest text line)

Upvotes: 0

Robbin van der Jagt
Robbin van der Jagt

Reputation: 796

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/

Upvotes: 1

Related Questions