<button></button> 한줄로 쓸때?

[박민권]

<button type="button">한줄로</button><button type="button">한줄로</button>
<br>
<button type="button">두줄로</button>
<button type="button">두줄로</button>

Code: Select all

<button type="button">한줄로</button><button type="button">한줄로</button>
<br>
<button type="button">두줄로</button>
<button type="button">두줄로</button>

한줄로 쓴 버튼태그와 두줄로 쓴 버튼태그인데 IE와 MZ 좀 틀리게 보입니다.
MZ는 두줄로 쓸 경우 두개의 버튼 사이가 살짝 벌어집니다.
한줄로 쓰자니 코드가 보기 않좋고 두줄로 쓰자니 IE와 MZ 차이가 나는게
정말 찝찝하네요. 두줄로 써도 두 객체의 사이가 떨어지지 않게 할 수 없을까요?

[tenshi]

element 사이의 공백이나 line feeding 문자가 &nbsp;로 파싱되는지 안되는지의 차이로군요..
공백이 존재하지 않는 링크를 여러개 배치할 때도 그렇지만..

Code: Select all

<button type="button">버튼1</button><button
    type="button">버튼2</button><button
    type="button">버튼3</button>

이정도로.. 씁니다. 개행의 위치는 개인취향이겠고.. 보기쉽게 잘 띄어주면 되겠네요 ^^

[hyeonseok]

Code: Select all

<div style="font-size: 1px;">
	<button type="button">한줄로</button> <button type="button">한줄로</button>
	
	<button type="button">두줄로</button>
	<button type="button">두줄로</button>
</div>

로 하시면 버튼들 끼리 1px 씩 떨어 집니다. 한줄로 한애들 사이에도 공백을 넣었습니다. 뭐...좋은 방법은 아닌것 같죠...^^;;

비슷한 경우로 이미지들끼리 붙였을때 IE 에서 아래 공란이 생기는 문제는 vertical-align: middle 로 해결 할 수 있습니다.

[박민권]

element 사이의 공백이나 line feeding 문자가 &nbsp;로 파싱되는지 안되는지의 차이로군요..
공백이 존재하지 않는 링크를 여러개 배치할 때도 그렇지만..

Code: Select all

<button type="button">버튼1</button><button
    type="button">버튼2</button><button
    type="button">버튼3</button>

이정도로.. 씁니다. 개행의 위치는 개인취향이겠고.. 보기쉽게 잘 띄어주면 되겠네요 ^^

괴롭지만 나름대로 좋은 방법인거 같습니다.

흑... 깔끔한 들여쓰기 코드를 좋아하는데...

html에도 한줄로 인식하게 해주는게 있으면 좋겠네요.

VB같은 경우

코드한줄 _
코드두줄

이렇게 말이죠. ㅎㅎ