select태그랑 input태그가 사이에 공간없이 붙는 이유

input 태그, select 태그를 사용하면 나란히 옆으로 정렬되면서 저절로 4px정도 공간이 생기는데 이상하게도 input 태그와 select 태그 사이의 공간이 사라지고 붙어버렸다. 무슨 이유인지 엄청 고민했는데 그 이유는 아주 간단했다. 

 

1. 문제 화면

input, select태그 붙어있음

input 태그와 select 태그 사이의 4px 정도의 공간이 사라지고 붙어있는 것을 확인 할 수 있다. 

 

2. 문제 이유

[HTML]

<div class="wrap">            
	<select>
    	<option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
	</select><input type="text" style="width: 200px;" /> 
</div>

내가 select 태그 옆에 붙여서 input태그를 작성했기 때문이었는데 input태그를 selcet 밑으로 내리니 바로 4px의 사이 간격이 생겨 났다.  

 

3. 해결 화면

[HTML]

<div class="wrap">            
	<select>
    	<option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
	</select>
    	<input type="text" style="width: 200px;" /> 
</div>

 

[결과화면]

input, select태그 사이 공간생긴