이 텍스트 상자 사이의 공백은 어떻게 제거합니까?

Question

텍스트 상자간에이 양식의 공백을 제거하려면 어떻게합니까?

<form method="post" action="mailto:email@isp.com"> 
    <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> 

Answer 1

공백이 각 <p> 태그의 여백에서 오는 것 같습니다. 여백 제거는 효과가있는 것 같습니다.

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

을하지만 모든 공간을 삭제합니다 :

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

Answer 2

이 같은 <p> </p>의 </br> unstead를 사용할 수 있습니다.

일부 웹 사이트에서 : 단락을 분리하지 않고 줄 바꿈을 입력하려면 <br> 태그를 사용하십시오.

Answer 3

공간은 당신이 CSS를 사용하여 재설정 할 필요가 브라우저 정의 마진에 의해 발생하는

길고 적절한 방법. 이것은 기본적으로 당신이 알지 못하는 기본값을 정의하는 브라우저없이 '깨끗한 슬레이트'에서 작동합니다.

이 파일을 'reset.css'라는 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; 
} 

그런 다음 HTML 파일의 '머리'상단에 링크하십시오.

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

참고 : 리셋로드되는 첫 번째 스타일 시트 있는지 확인합니다. 그렇지 않으면 사용자가 직접 조정 한 후에 모든 것이 재설정됩니다.

이 페이지에 특정 문제를 해결하기

짧은 방법, 모든 <p> 요소의 여백을 다시 설정해야합니다. CSS 파일에서 :

form p { 
    margin: 0; 
}