通过选择不同选项来更改保证金

Question

$('#cpseltop').change(function() {
	var a = $(this).val();
	$('.cpselhide').hide();
	$('#cpsel' + a).show();
});

.cpselect{
	display:block;
	border:1px solid #999;
	border-radius:9px;
	outline:none;
	width:100%;
	padding:2px 5px;
	cursor:pointer;
	font-size:12px;
	margin:7px auto;
	text-transform:uppercase;
}

.cpselauth, .cpselmoder{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='cpselect cpseltop' id='cpseltop'>
<option value='status'>STATUS</option>
<option value='auth'>AUTHORS</option>
<option value='moder'>MODERS</option>
</select>

<select class='cpselect cpselstatus cpselhide' id='cpselstatus'>
<option value='all' data-max=54>ALL</option>
</select>

<select class='cpselect cpselauth cpselhide' id='cpselauth'>
<option value='all'>ALL</option>
</select>

<select class='cpselect cpselmoder cpselhide' id = 'cpselmoder'>
<option value='all'>ALL</option>
</select>

如果我选择AUTHORS，则选择MODERS和cpseltop STATUS与下一个之间的边距会更大！

为什么会这样？

Answer 1

您正面临margin-collapsing问题。选择状态后，您会在主select之后显示下一个的display:block标记，因为这两个元素都与其边距折叠相邻。但是对于其他select并非如此，因为在显示时设置为display:inline-block因此它们的边距不会随着第一个而崩溃。

要解决此问题，您可以只考虑一个边距（顶部或底部）或将.cpselect的样式更改为display:inline-block：

$('#cpseltop').change(function() {
	var a = $(this).val();
	$('.cpselhide').hide();
	$('#cpsel' + a).show();
});

.cpselect{
	display:inline-block;
	border:1px solid #999;
	border-radius:9px;
	outline:none;
	width:100%;
	padding:2px 5px;
	cursor:pointer;
	font-size:12px;
	margin:7px 0;
	text-transform:uppercase;
}

.cpselauth, .cpselmoder{
	display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class='cpselect cpseltop' id='cpseltop'>
<option value='status'>STATUS</option>
<option value='auth'>AUTHORS</option>
<option value='moder'>MODERS</option>
</select>
<select class='cpselect cpselstatus cpselhide' id='cpselstatus'>
<option value='all' data-max=54>ALL</option>
</select>
<select class='cpselect cpselauth cpselhide' id='cpselauth'>
<option value='all'>ALL</option>
</select>
<select class='cpselect cpselmoder cpselhide' id = 'cpselmoder'>
<option value='all'>ALL</option>
</select>