**问题描述:**如果不给div设置边界border ,div就会与上面的inline-block 有一个默认的间距,但是如果我在div中设置了border,就会出现图2所示,就没有空白。
留下这个问题,日后来答,2021.6.30
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
margin: 0px;
}
label
{
display: inline-block;
border: 1px grey solid;
border-radius: 3px;
padding:3px;
font-size: 13px;
}
label:hover
{
border: rgb(161, 226, 188) 1px solid;
color:rgb(161, 226, 188);
}
#d1{
display: none;
border-radius: 3px;
background-color: rgb(224, 124, 124);
/* border: solid 1px rebeccapurple; */
}
#d2{
display: none;
border-radius: 3px;
background-color: rgb(192, 14, 14);
/* border: solid 1px rebeccapurple; */
}
</style>
</head>
<body>
<label for="" onmouseover="oOver()" >栏目1</label><label onmouseover="oOver1()" for="">栏目2</label>
<div id="d1" >
<p>
段落1
</p>
<p>
段落2
</p>
<p>
段落3
</p>
</div>
<div id="d2">
<p>
段落1
</p>
<p>
段落2
</p>
<p>
段落3
</p>
</div>
<script>
function oOver(){
document.getElementById('d1').style.display = "block";
document.getElementById('d2').style.display ="none";
}
function oOver1()
{
document.getElementById('d2').style.display ="block";
document.getElementById('d1').style.display = "none";
}
</script>
</body>
</html>