CSS 여백 문제

Question

저는 CSS가 처음이에요. 제발 같이가주세요. 나는 스타일을하려고하는이 형태를 가지고있다. div에있는 확인 라벨을 제외한 모든 것이 잘 작동합니다. div.field 사이에 약간의 공간을두고 싶습니다. 모든 입력 요소에 대해 작동하지만 맨 아래에있는 레이블 메시지에는 작동하지 않습니다. 나는 margin-top을 시도했지만 아무 소용이 없다. 나는 그 요소를 중심에 배치하고 싶습니다.

Firefox의 웹 개발자 애드온을 사용하면 라벨 태그의 div.field의 너비와 높이가 각각 284px와 209px라는 것을 알 수 있습니다. 왜 그런 식으로 설정하지 않았습니까? 당신은 코드를 볼 수 있습니다

는 jsfiddle에 살고 : http://www.jsfiddle.net/yMHJY/

Answer 1

이 솔루션은 정말 간단합니다. 여백 가기를 label 요소의 부모 요소에 추가하고 overflow: hidden을 div#contact div .field 선택 자에 추가합니다.

---

그러나 효율성 및 의미 적 정확성을 높이기 위해 코드를 다시 작성할 수 있다고 말할 수 있습니까? 예를 들어, p 태그의 마지막 마사지는 div의 label이 아니며 포함됩니다. 또한 각 input 요소를 div 대신에 ul의 순서가없는 목록에 배치해야합니다. 당신은 또한 불필요한 많이 float과 각 input의 끝에 br은 전적으로 uneeded입니다. 아, 그리고 어떻게 든 Calluna를 포함하지 않는 한, 웹 안전 글꼴에 충실하십시오. (그렇다면 사용자의 브라우저에서 대안을 제안 할 필요가 있습니다. 또한 사용자 브라우저에서 지원하지 않으며 브라우저를 제공해야합니다. 글꼴이로드되는 동안 표시 할 항목).

나중에에 대한 부하를 고정 편집은, 나는 이런 종류의 물건을 지불해야합니다 :) 그냥 더 나은 HTML 및 CSS 다음에 충실.

http://www.jsfiddle.net/SNrtA/

Answer 2

는 부모 컨테이너를

<div id="parent"> 
    <label id="label">Your Message Has Been Sent</label> 
</div> 


div#parent { 
text-align:center; 
} 

를 추가하거나 그것을 목표로 원래 부모 DIV에 ID를 추가 할 수 있습니다 센터 여백에 관해서 CSS

위, 당신 부유물에 문제가있는 것 같습니다 : 왼쪽은

div # contact div 입력 [type = text] 클래스에 설정되어 있습니다. 여백 문제를 일으킬 수 있으므로이 내용을 지워야합니다. 이것을 제거하고 스타일을 수정 해보십시오. 왜 입력을 떠 다니는거야?