1

Having a slight CSS issue with my buttons in this CodePen.

The first one seems to be spacing my buttons, and I'm not sure why. However if you click on the + button to add more tables, the weird spacing is gone, and it follows my input type button margin style.

How can I fix this?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
bmoneruxui
  • 303
  • 7
  • 17

2 Answers2

2

Because whitespace matters, basically, as you deal with inline elements. The <input>s in the source code are separated by whitespace; the ones injected (by JS) aren't.

There are various solutions to this, most of them listed in this question (I'd suggest checking them all instead of just the accepted one). Those, in turn, can be grouped into...

1) 'tag clash', removing whitespace in between elements. It can be done like this...

  <input type="button" class="some_class"
/><input type="button" class="some_class"
/><input type="button" class="some_class" />

... or like this...

   <input type="button" class="some_class" /><!-- 
--><input type="button" class="some_class" /><!--
--><input type="button" class="some_class" />

2) 'style collapse' - leaving whitespace in place, but making it invisible. In absense of the simple solution, usually this involves creating some container around those inline elements, and setting its font-size and line-height to 0.

The downside of this approach is that you'll have to restore these properties for the elements inside that container.

3) 'floating' - turning all the inline elements into blocks, applying 'float' style to them. This way the whitespace will go away visually too.

Community
  • 1
  • 1
raina77ow
  • 103,633
  • 15
  • 192
  • 229
  • Ahh ok ok. There's no way to alleviate this via code? I like the visual presentation of the HTML this way :( – bmoneruxui Sep 04 '13 at 16:42
  • Well, [this thread](http://stackoverflow.com/questions/2628050/ignore-whitespace-in-html) has a LOT of various solutions (it's about ``, but it's actually the same problem). If I can't use floats, I usually prefer `tag clash` solution (when closing tag is moved right to the beginning of the opening tag). – raina77ow Sep 04 '13 at 16:45
  • Thanks. I ended up using the comment solution. – bmoneruxui Sep 04 '13 at 16:51
0

I have a better solution.

just add a 'font-size:0' to the parent tag '' and then add 'font-size:13px' to the input buttons (to class '.togPTbutton').

i just tried the above on your code and its working.

Gaurav Kakkar
  • 348
  • 4
  • 5