CSS大边距但边框重叠

Question

导航向下移动到下一行，因此它们留在浏览器中，即边界重叠时。我如何才能使边框在垂直方向之间留有空间？在水平方向上，边距的工作方式与正常情况相同，随着像素的增加，元素之间会增加空间，但垂直方向不会。

.nav:link {
    	color: #118794;
    	text-decoration: none;
    	margin: 10px;
    	padding: 4px;
    	border-width: 4px;
    	border-style: ridge;
}
.nav:visited {
    	color: #0BB545;
    	text-decoration: none;
    	margin: 10px;
    	padding: 4px;
    	border-width: 4px;
    	border-style: groove;
}
.nav:hover {
    	color: #0BB545;
    	text-decoration: underline;
    	border-style: groove;}    
    	border-style: groove;
 }

    		<nav class="navbar">
    			<a class="nav" id="top" href="index.html">Home</a>
    			<!--**Create Drop Down for People-->
    			<a class="nav" href="family/utahfamily.html">My Family</a>
    			<a class="nav" href="friends/utahfriends.html">Friends</a>
    			<!--**Create Drop Down for places-->
    			<a class="nav" href="hiking/utahhiking.html">Hiking</a>
    			<a class="nav" href="recreation/utahrecreation.html">Recreation</a>
    			<a class="nav" href="restaurants/utahrestaurants.html">Restaurants</a>
    			<!--**Create Drop Down for Adventures-->
    			<a class="nav" href="mountainadventure/utahmountains.html">Mountains Adventure</a>
    			<a class="nav" href="ranchadventure/utahranch.html">Ranch Adventure</a>
    			<a class="nav" href="tuningadventure/utahtuning.html">Piano Tuning Adventure</a>
    			<a class="nav" href="/otherthings/stufftodo.html">Other Things to Do</a>
    			<!--contact-->
    			<a class="nav" href="contact/contact.html">Contact</a>
    		</nav>
    		
    		<!--end  nav-->

    

Answer 1

这是行为-CSS将所有内容都视为内联（默认），这就是边框/边距/填充的样子，因为边距仅在链接上。一种使用inline-block的解决方案（可能现在想摆脱边距）：

.nav:link {
    	color: #118794;
    	text-decoration: none;
      display:inline-block;
    	margin: 10px;
    	padding: 4px;
    	border-width: 4px;
    	border-style: ridge;
}
.nav:visited {
    	color: #0BB545;
    	text-decoration: none;
    	margin: 10px;
    	padding: 4px;
    	border-width: 4px;
    	border-style: groove;
}
.nav:hover {
    	color: #0BB545;
    	text-decoration: underline;
    	border-style: groove;
 }

<nav class="navbar">
    			<a class="nav" id="top" href="index.html">Home</a>
    			<!--**Create Drop Down for People-->
    			<a class="nav" href="family/utahfamily.html">My Family</a>
    			<a class="nav" href="friends/utahfriends.html">Friends</a>
    			<!--**Create Drop Down for places-->
    			<a class="nav" href="hiking/utahhiking.html">Hiking</a>
    			<a class="nav" href="recreation/utahrecreation.html">Recreation</a>
    			<a class="nav" href="restaurants/utahrestaurants.html">Restaurants</a>
    			<!--**Create Drop Down for Adventures-->
    			<a class="nav" href="mountainadventure/utahmountains.html">Mountains Adventure</a>
    			<a class="nav" href="ranchadventure/utahranch.html">Ranch Adventure</a>
    			<a class="nav" href="tuningadventure/utahtuning.html">Piano Tuning Adventure</a>
    			<a class="nav" href="/otherthings/stufftodo.html">Other Things to Do</a>
    			<!--contact-->
    			<a class="nav" href="contact/contact.html">Contact</a>
    		</nav>
    		
    		<!--end  nav-->