Remove inline-block space between two wordpress loop elements? - php

Question

How do i remove the inline-block space between two divs that are a part of the wordpress loop? They are supposed to sit side-by-side, each being 50% width. I realize I could change the width to 49% or use floats, but I would like to leave it this way if possible.
I know you normally can do it by eliminating the white space in the coding with comments as below:
<div class="before-after">
<img src="images/ba_01.jpg" alt="">
<h4>Frick TDSH 355XL<br><small>Slide Valve and Rotor Housing</small></h4>
</div><!-- this comment here eleminates the spacing
--><div class="before-after">
<img src="images/ba_02.jpg" alt="">
<h4>Frick NGC300 Gear Plate</h4>
</div>
This is my wordpress loop, and no matter where I put the comment, and still adds white space in the actual returned html.
<?php
$my_query = new WP_Query(
array(
'cat' => '2',
)
);
while ( $my_query->have_posts() ) : $my_query->the_post();
?>
<div class="before-after">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<h4><?php the_title(); ?><br><small><?php the_content(); ?></small></h4>
</div><!-- --><?php endwhile;?><?php wp_reset_postdata();?>
And this is what is showing up in Developer Tools:
<div class="before-after">...</div>
<!---->
<div class="before-after">...</div>
<!---->
I'm sure I'm just overlooking something easy, but any help would be appreciated. Thanks!
#Prusprus here it is straight from the source code:
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_02.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick NGC300 Gear Plate" />
<h4>Frick NGC300 Gear Plate<br><small></small></h4>
</div>
<!---->
<div class="before-after">
<img width="500" height="300" src="http://localhost:8888/wp-content/uploads/2013/10/ba_01.jpg" class="attachment-post-thumbnail wp-post-image" alt="Frick TDSH 355XL" />
<h4>Frick TDSH 355XL<br><small><p>Slide Valve and Rotor Housing</p>
</small></h4>
</div>
<!---->

Answer 1

There may be a different way to mark this as answered, not sure, but #Prusprus gave me the solution in a comment above.
I simply had to remove a line break at the start of my code between the closing php tag and the start of my div.

Answer 2

The traditional way of floating inline-block elements could correct this, but since its unfavored there is another way.
You can also set the letter spacing of the parent element to -0.31em to solve this and set the letter-spacing back to normal in the divs themselves. I'll set up a jsfiddle in a sec.
CODE
.row {
letter-spacing:-0.31em;
}
.col {
letter-spacing:normal;
display:inline-block;
width:50%;
}
Good luck!

Answer 3

Two methods here
Set the parent's font-size to 0 and then restore it on the inline-block elements.
Apply a suitable margin to the last div.
DEMO x 2
HTML
<div class="opt1">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
<div class="opt2">
<div class="before-after"></div>
<div class="before-after"></div>
</div>
CSS
.opt1, .opt2 {
margin:10px;
border:1px solid green;
}
.before-after {
display:inline-block;
background:lightgrey;
width:50%;
height:100px;
font-size:16px
font-size:1rem;
}
.opt1 {
font-size:0;
}
.opt2 .before-after{
vertical-align:top;
}
.opt2 .before-after:last-child {
margin-left:-.25em;
}