fieldset legend 아래의 공백을 제거하는 방법

Question

fieldset 안에 테이블을 사용하고 있으며 전설 아래에 갭이 있으므로이를 제거해야합니다. 나는 padding:0px과 margin:0px을 모두 fieldset과 범례 인라인 스타일에서 사용해 보았습니다. 그러나 아무도 일하지 않았다. 제발 좀 도와주세요.

감사합니다.

편집 : 선택 메뉴를 사용하고 있기 때문에

코드는 매우 크다. 그러나 여기에 코드의 개요가 있습니다.

<fieldset> 
      <legend><b>Options</b></legend> 
      <table> 
      <tr> 
       <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>  
</fieldset> 

필드 세트에 여백 및 패딩이 작동하지만 범례에는 아무런 변화가 없습니다. 전설에 의해 생성 된 간격을 제거 할 수있는 방법이 있습니까?

Answer 1

기본 렌더링에는 문서 모양을 읽기 쉽게하기위한 채우기가 포함될 수 있습니다. 기본값은 브라우저마다 다르지만 fieldset 및 legend에 수직 채우기가 포함될 수 있으며 td 요소에 수직 채우기가 거의 확실하게 포함될 수 있습니다.

legend { 
    padding-top: 0; 
    padding-bottom: 0; 
} 
fieldset, td { 
    padding-top: 0; 
} 

을뿐만 아니라 기본적으로 테이블 셀 사이가 간격, 그리고이 심지어 단일 셀 테이블의 셀 주변에 약간의 공간이 있음을 의미 : 패딩을 제거하려면, 당신은 설정할 수 있습니다. 그것을 제거하는 크로스 브라우저 방법은 다음과 같습니다

이 전설과 셀 내용 사이의 간격을 제거 추가

table { 
    border-collapse: collapse; 
} 

IE와 크롬에 (당신이 legend 및 label 요소에 배경 색상을 설정하여 볼 수 있습니다). 파이어 폭스에서는 1 픽셀 갭이 남아있는 것처럼 보입니다.

Answer 2

Eric Meyer's reset에 따르면, 필드 세트와 범례 모두에서 margin:0;과 padding:0;이 작업을 수행해야합니다. 테이블에 설정

1. 패딩/마진/TD
라벨/TD의
2. 라인 높이

:

Testing your code in a fiddle

는 실제로 그렇게이 문제를 일으킬 수있는 다른 몇 가지가있다, 일

Answer 3

아래의 공백을 제거하려면 margin-top을 사용하십시오. -ve px;

그냥 좋아 : FIELDSET와 전설의

<fieldset> <legend><b>Options</b></legend> <table style="margin-top:-13px;"> <tr> <td colspan="1"><label>Passengers:&nbsp; </label></td></tr></table>
</fieldset>

Answer 4

브라우저 형식은 브라우저 사이에 있지만, 어떤 경우에 넓게 변화 엉망이다.

여는 fieldset 태그와 첫 번째 태그 사이에 공백이 있으면 firefox가 BREAKS를 추가합니다. 전설에 대해서도 마찬가지입니다.

태그 사이의 공백을 모두 제거하는 가장 쉬운 방법은 다음과 같습니다.

Answer 5

필드 세트 내에서 절대 위치 지정을 사용하는 경우 브라우저간에 동일한 동작을 얻으려고 너무 노력했습니다.

fieldset에 legend을 추가하면 Chrome 및 IE에서 텍스트 중간까지 필드 세트의 위쪽 테두리를 이동하지만 포함 된 요소는 여전히 원래의 상단에 상대적으로 배치됩니다. fieldset. 그러나 Firefox는 포함 된 요소의 맨 위를 전설 아래로 이동합니다. FF는 범례 텍스트 위와 아래에 공백을 허용합니다.

나는 마침내 CSS를 추가하여 극복 할 수 있었다 :

legend { 
    line-height: 0; 
} 

전설은 다음 위쪽 테두리를 이동하지 않고 첨가하고 위치가 크롬, IE와 FF에서 동일했다.