2

I've made a table and I have a couple of divs inside one of it's cells. Now, between the divs and the cell there is a little space that really bothers me, I'm talking about the top and bottom spaces (not from the sides). I hope you can help me solve it. The code:

.square
{
  background-color: Gray; 
  width: 150px; 
  padding: 20px; 
  display: inline-block; 
  margin: 0;        
  font-size: 20px;
}
<table>
  <tr>
    <td style="margin: 0 auto; background-color: Blue; font-size: 0;">
      <div class="square"> Text </div>
      <div class="square"> Text </div> 
      <div class="square"> Text </div>
    </td>
  </tr>
</table>

I've made a Blue background so you can see the space I'm talking about. Is there a way to have no space like that?

Tempo
  • 35
  • 7
  • Set the td's padding: 0; ? – Doug Apr 07 '18 at 17:26
  • Why You close it ? Your "duplicate answer" have 7 years ... display:inline-block have added margin. Set margin-right:-4px or -5px – Wordica Apr 07 '18 at 17:33
  • I don't think you guys understand, or maybe I didn't understand. I am talking a bout the little spaces on the top and bottom, not the one on the left and right! The duplicate one is an answer about the space on the sides but that's not what I am trying to solve. – Tempo Apr 07 '18 at 17:48
  • Here, I've changed the code now so you can see what I was talking about a bit clearer. – Tempo Apr 07 '18 at 17:49
  • changed the duplicated answer. both of the questions are one of the most asked in the site in CSS/HTML tag – dippas Apr 07 '18 at 18:38
  • Okay thanks, but still, I want it only in a specific row and not in the whole table. How do I do that? – Tempo Apr 07 '18 at 18:54
  • Never mind, I can work with that perfectly. Sorry about the duplicate didn't saw that post. Thanks a ton – Tempo Apr 07 '18 at 18:59

1 Answers1

-2

This space is caused by " " (whitespace-char) between. Use float: left; on each square to solve it.

SimonSolutions
  • 97
  • 1
  • 4