I have the following fairly standard form setup:

HTML

<form>
    <p>
        <label for="example">A label</label>
        <input type="text" name="example">
    </p>
</form>

CSS

form {width:690px;}
form label {width:180px; display:inline-block; margin-right:20px; text-align:left;}
form input {width:488px; float:right; border-width:1px; padding:0; margin:0;}

So the width of the form is 690px. The label sits to the left of the input and has no border or padding and a right margin of 20px. The input has no padding or margin. Consequently label width + label margin + input width + input border = 690px (the width of the form).

On Firefox 3.5, this displays as it should and Firebug reports the measurements as they appear in the CSS. However, in both Google Chrome 4 and Safari 4, the input gets pushed to the next line as if it can't fit on the line above. Indeed, if I reduce the width of the input to 484px, it sits on the same line implying that Webkit has added an extra 4 pixels into the mix.

However, if I use the developer tools provided with Google Chrome, they show the exact measurements that are in the CSS and reported by Firebug.

I realise that the quick and easy solution to this is to simply reduce 4px from my layout. However, I want to know where these 4 pixels have gone and for what reason?

Thanks very much!!

  • Did you look and see if it's not padding, but text-indentation? Gary Hepting almost 7 years ago
  • I tried setting text-indent:0; but with no effect. Rupert Madden-Abbott almost 7 years ago
  • K, ill check it out when I get off work this evening Gary Hepting almost 7 years ago

1 answer

2
points
This was chosen as the best answer

If you make the label just display:inline (so the margin is ignored) or float it left; or remove the whitespace from between the label and the input elements in the html, it all works:

form {width:690px;}
form label {width:180px; display:inline-block; margin-right:20px; text-align:left;}
form input {width:488px; border-width:1px; padding:0; margin:0;}

By making the label an 'inline-block' element, whitespace in the HTML still counts, but you also get the margin, therefore causing the drop.

float them both (no inline white-space issues) or remove the html whitespace and you're sorted.

Answered almost 7 years ago by Tony Crockford
  • making it just display:inline loses the right margin and just the whitespace is used to space the two elements, inline-block appears to add the whitespace to the 20px margin, thus making form not wide enough. Tony Crockford almost 7 years ago
  • edited the answer after my comment once I'd realised the reason display:inline helped! Tony Crockford almost 7 years ago
  • Wow I would never have thought of that... thank you very much! Rupert Madden-Abbott almost 7 years ago