Html代码中的标签换行造成间距问题

目标效果：

问题出现：

问题代码：

Html代码：

	

		

			自定义房间号：
			
		
		进入
	

CSS代码：

#hall_div_operation{
	clear: both;
	width: 389px;
	height: 60px;
	margin-top: 10px;
}

.hall_operation .label_input{
	float: left;
	font-size: 14px;
	padding-left: 10px;
}

.hall_operation .btn{
	width: 70px;
	float: left;
	margin-left: 10px;
}

#EnterRoomBtn{
	background: #f7f8f8;
	color: #1c90f6;
	border: 1px solid #1c90f6;
	box-shadow: 0px 0px 2px #1c90f6;
}

问题分析：连续几个内联标签或表单元素的换行在浏览器会被解释为一个空格。

解决方法：

方法一：不换行

	

		

			自定义房间号：
		 
		 进入
	

方法二：设置父级块的字体大小为0

若其中还有字体需要显示的话，需要用标签去包裹它，然后再设置字体大小。

Html代码：

	

		

			自定义房间号：
			
		
		进入
	

CSS代码：

#hall_div_operation{
	clear: both;
	width: 389px;
	height: 60px;
	margin-top: 10px;
}

.hall_operation .label_input{
	float: left;
	padding-left: 10px;
	font-size: 0;
}

.hall_operation .label_input .span_font{
	font-size: 14px;
}

.hall_operation .btn{
	width: 70px;
	float: left;
	margin-left: 10px;
}

#EnterRoomBtn{
	background: #f7f8f8;
	color: #1c90f6;
	border: 1px solid #1c90f6;
	box-shadow: 0px 0px 2px #1c90f6;
}

方法三：设置 margin-left 为-3px

Html代码：

	

		

			自定义房间号：
			
		
		进入
	

CSS代码：

#hall_div_operation{
	clear: both;
	width: 389px;
	height: 60px;
	margin-top: 10px;
}

.hall_operation .label_input{
	float: left;
	padding-left: 10px;
	font-size: 14px;
}

.hall_operation .label_input input{
	margin-left: -3px;
}

.hall_operation .btn{
	width: 70px;
	float: left;
	margin-left: 10px;
}

#EnterRoomBtn{
	background: #f7f8f8;
	color: #1c90f6;
	border: 1px solid #1c90f6;
	box-shadow: 0px 0px 2px #1c90f6;
}