This extra space is driving me buggy!

This is probably something simple..just I am by far NOT a html/css expert :) Is there a way to remove the extra space between objects on a page that is created when not coding all on one line? For example: <input type='checkbox' checked='true' name='attr_OCCRBL' value='1'><button float="left" type='roll' value='!rb 1d100 [[@{OCCTr}]] 0 @{OCCRBL} @{OCCRSK}' name='roll_SkillCheck2' /></button> Gives me this (notice the space between the checkbox and the button): And this exact same code but on 2 lines: <input type='checkbox' checked='true' name='attr_OCCSBL' value='1'> <button float="left" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button> Gives me this(bigger space between them): This is what I can get if I just jam all the elements on the same line (the first 4 of them) they all get closer together: But the code is horrible to read or look at: <input type='checkbox' checked='true' name='attr_OCCRBL' value='1'><button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCTr}]] 0 @{OCCRBL} @{OCCRSK}' name='roll_SkillCheck2' /></button><input float="left" type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCRSKLV" value=1><input float="left" style="width:42%;" type="text" name="attr_OCCRSK" value=SkillName> How do I do fix these compounding extra spaces (they eat up more of my limited row space as I add more items in that row) without coding 1/4 of my character sheet as one long line of HTML code?

what css do you have for those?

here is the HTML of the first 4 in the row that show it: <table class="sheet-Table1" width="100%;"> <tr> <fieldset class="repeating_occsk"> <input type='checkbox' checked='true' name='attr_OCCSBL' value='1'> <button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'></button> <input float="left" type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"> <input float="left" style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" value=SkillName> </fieldset> </tr> </table> and all the relevant CSS i believe: table.sheet-Table1 {     background-color: #DBDBDB;     border: 1px solid black;     width: 100%; } input[type=checkbox] {   zoom: 1.7; } th {     background-color: #586DCC;     color: white;     height: 10px;     border: 1px;     border: none; font-size: 18px; } table {     border: 1px solid #666666; } td {     font-size: 11px;     font-weight: bold;     padding: 0px;     margin: 0px; } button[type=roll].sheet-blank {     font-size: 15px;     background: #ebf1f6;     background: -moz-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     background: -webkit-linear-gradient(top, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     background: linear-gradient(to bottom, #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);     filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb', GradientType=0);     border: 1px solid #424242;     border-radius: 5px;     margin: 0;     padding: 0em;     width: 20px;     height: 20px;     color: #616161; } button[type=roll].sheet-blank:hover {     color: #ACD2F2;     background: #ACD2F2;     border: 1px solid #424242;     margin: 0;     padding: 0em;     border-radius: 6px; }

I've experienced this before and had to just settle on combioning elements on the same line when the whitespace was a bother. ;-( Some info here: <a href="https://stackoverflow.com/questions/5078239/how-do" rel="nofollow">https://stackoverflow.com/questions/5078239/how-do</a>... Following the advice from the link above, you should add font-size:0 to the parent element example; try adding this to your css fieldset.repeating_occsk {font-size:0;}

That didn't work, but the suggestion of add comments on that link does... &lt;fieldset class="repeating_occsk"&gt; &lt;input type='checkbox' checked='true' name='attr_OCCSBL' value='1'&gt;&lt;!-- --&gt;&lt;button float="left" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'&gt;&lt;/button&gt;&lt;!-- --&gt;&lt;input float="left" type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"&gt;&lt;!-- --&gt;&lt;input float="left" style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" value=SkillName&gt; &lt;/fieldset&gt; That fixes it, but thats very very strange I think... Im fighting for every pixel I can get horizontally, so time to add TONS of comment markers (err tags) :\

fieldset.repeating_occsk {font-size:0;} worked in a quick jsfiddle test, but I think roll20 may sanitize fieldset and/or repeating_foo.&nbsp; Not sure. "comment markers" interesting.&nbsp; Glad you got it figured out.&nbsp; I may revisit the old problems I noticed.&nbsp; ;-)&nbsp;

Use CSS grid or flex instead of inline-boxes if you don't want to care about whitespace anymore. (Vince' solution also works, but luckily it's not 2002 anymore). EDIT: To be more precise, for this particular thing my suggestion would be to wrap everything in a div like this: &lt;fieldset class="repeating_occsk"&gt; &lt;div class="sheet-flex&gt; &lt;input type='checkbox' checked='checked' name='attr_OCCSBL' value='1'&gt; &lt;button" class="sheet-blank" type='roll' value='!rb 1d100 [[@{OCCT}]] 0 @{OCCSBL} @{OCCSK}' name='roll_SkillCheck'&gt;&lt;/button&gt; &lt;input type="text" style="width:15px; background:#ff6666; color:#fff;" name="attr_OCCSKLV" value="1"&gt; &lt;input style="width:43%;" class="sheet-skill" type="text" name="attr_OCCSK" placeholder="SkillName"&gt; &lt;/div&gt; &lt;/fieldset&gt; (deleted all the useless float=left stuff!) and use .sheet-flex { display: flex } You could also set the display property directly on the .repitem, but it's more reusable if you do it this way. If you want to go further with what flexbox allows you to do, you can also set .sheet-skill { flex-grow: 1 } to have the text input grow dynamically to be as large as the container allows.

Even with flex, it perhaps won't look equally distant because the native checkbox has some sort of "white space"/inner margin: Perhaps with some negative margin&nbsp; (like "margin-right: -Xpx;") on the checkbox ? Or maybe use&nbsp; pseudo check box (you'll be in more in control of how they look) ?

Refer to W3School CSS topics, one will help you out to resolve your issue