CODEWITHSUNDEEP
htmlforms
Rhett Claypool
Rhett Claypool

Reputation: 65

how do I remove spaces between these text boxes?

How do I remove the spaces in this form between text boxes?

<form method="post" action="mailto:[email protected]">
    <p>First name: <input name="firstname" type="text" size="15"/>Last Name:   <input name="lastname" type="text" size="20"/></p>
    <p>Address: <input name="address" type="text" size="50"/></p>
    <p>City: <input name="city" type="text" size="25"/></p>
    <p>State: <input name="state" type="text" size="5"/></p>
    <p>Zip: <input name="zip" type="text" size="10"/></p>
    <p>E-mail address: <input name="E-mail" type="text" size="30"/></p>
    <hr style="size: auto; width: auto;">
    </hr>

    <hr style="size: auto; width: auto;">
    </hr>

Upvotes: 0

Views: 91

Answers (3)

Cayman Roe
Cayman Roe

Reputation: 125

Long and proper way

The spaces are caused by browser-defined margins that you need to reset using CSS. This is essentially working from a 'clean slate', without the browser defining default values you don't know about.

Put this inside a CSS file called 'reset.css'.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Then link it in the top of the 'head' in your html file.

<link rel="stylesheet" type="text/css" href="reset.css">

Note: Make sure the reset is the first stylesheet that is loaded. Otherwise everything will be reset after you've made your own adjustments.

Short way

To solve the problem specific to this page, you must reset the margin of all <p> elements. In your CSS file:

form p {
  margin: 0;
}

Upvotes: 0

J.Lin
J.Lin

Reputation: 21

You can use </br> unstead of <p> </p> like this:

Address: <input name="address" type="text" size="50"</br>
City: <input name="city" type="text" size="25"/></br>

But it will delete all the space.

From some website: Use the <br> tag to enter line breaks, not to separate paragraphs.

Upvotes: 1

Howzieky
Howzieky

Reputation: 829

It seems that the spaces are coming from the margins of each <p> tag. Removing the margins seems to work.

p { //You'll likely want this to be more specific, like "form p {..." or a class name
  margin: 0px;
}

Upvotes: 0

Related Questions