같은 높이의 다른 높이

입력란에는 padding:12px 24px;, 체크 상자에는 다음과 같은 패딩이 있습니다. 글꼴이 본문 16px Arial에 설정되고 다른 모든 글꼴 크기가 상속됩니다. 모든 요소에 대해 border:0;. 브라우저가 버튼 높이에 1 픽셀을 추가하는 이유는 무엇입니까? 라벨의 높이가 42px 인 경우 버튼의 높이가 43px입니다. 이것은 Chrome과 Firefox에서 발생합니다.같은 높이의 다른 높이

버튼과 라벨의 높이를 어떻게 만드나요? 코드의

enter image description here 는

부

<input type='checkbox' name='remember' id="remember"/><label for="remember" >Remember me</label> <input type='submit' value='Sign in' id='signin-button' /> (의 HTML 양식)

출처

2012-07-20 treng

테두리를 적용 했습니까? –

@ClydeLobo 모든 테두리는 0으로 설정했습니다. – treng

* {border : 0;} 또는 다른 것을 사용하셨습니까? –

모르겠지만, 아마 글꼴의 라인 - 높이까지 와서 어떻게하지 ' HTML의 다른 요소에서 처리됩니다. 과 같이 CSS와 높이를 강제

시도 :

#signin-button { height: 42px!important; border: none!important; overflow: hidden; }

나는 보통 일반적으로 요소에 대한 정확한 높이를 설정에 대해 해요,하지만이 경우에, 그것은 일을 단지 수와 적합.

행운을 빈다.

출처

2012-07-20 12:22:42

'! important'는 최후의 수단으로 만 사용하십시오. – techfoobar

그냥 높이 사용 : 42px 버튼으로 크롬으로 해결했습니다. – Gijs

고정 높이 대신 패딩을 설정했기 때문에 @Gijs 문제가 나타납니다. 그리고 선호하는 방법은 패딩과 함께 머물는 것입니다 – treng

line-height: 17px;을 추가하십시오. 이미 선 높이를 시도한 경우 죄송합니다.

출처

2012-07-20 12:56:13 DBUK

이제 라벨의 높이가 버튼의 높이보다 큽니다 : D,하지만 고맙습니다. – treng

같은 높이의 다른 높이

답변

관련 문제