Gaps between controls

D

dimstthomas

Is there any way to eliminate the gaps between adjacent html controls?
I want a text entry box with an adjacent label with no gap between
them. I have tried setting borders, margins and padding to 0, and using
forms, tables and divs but I still get about a 2 pixel gap between the
controls.

http://www.geocities.com/dimstthomas/index.htm

<html>
<head>
</head>
<body style="border:0;padding:0;margin:0;background:yellow">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:lightblue">
<BR>
<form style="border:0;padding:0;margin:0;background:green">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:lightblue">
</form>
<table style="border:0;padding:0;margin:0;background:red">
<tr>
<form style="border:0;padding :0;margin:0;background:green">
<td>
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:lightblue">
</td>
</form>
</tr>
</table>
<div style="border:0;padding :0;margin:0;background:green">
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
<input readonly=true value="cm"
style="border:0;padding:0;margin:0;background:lightblue">
</div>
</body>
</html>
 
J

Jonathan N. Little

Is there any way to eliminate the gaps between adjacent html controls?
I want a text entry box with an adjacent label with no gap between
them. I have tried setting borders, margins and padding to 0, and using
forms, tables and divs but I still get about a 2 pixel gap between the
controls.

Firstly, I know your just testing but us have such invalid markup that
your results will not be valid

<table style="border:0;padding:0;margin:0;background:red">
<tr>
<form style="border:0;padding :0;margin:0;background:green">
{You cannot put a FORM in a TABLE between the TR and TD elements like here }
<td>
<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
....

<form action="someDestination.cgi" method="post">
<!--
now you must have a block element's opening tag here
P, TABLE, DIV, or FIELDSET
-->
<table>
<tr><td><input type="text"...


<input value="3.5"
style="border:0;padding:0;margin:0;text-align:right;background:pink">
<input readonly=true value="cm"

Even in a test your should give your document a DOCTYPE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

And using stylesheet or at least a STYLE element can consolidate your
rules and make your testing markup more legible, e.g.

<style type="text/css">
BODY, TABLE, DIV { margin: 0; padding: 0; border: 0; }
TABLE { border-collapse: collapse; }
BODY { background-color: #FF0; }
..test1 { background-color: #F00; }
..test2 { background-color: #0F0; }

....

</style>


Now to answer your question, INPUTs are inline elements and the
whitespace between them is supposed to be ignored is not always by
browsers. Just remove the whitespace between INPUT elements in your markup

<input type="text" value="3.5" class="dimension"><input type="text"
value="cm" class="units" readonly>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top