css大边距但边框重叠[重复]

Posted 2023-03-06

【中文标题】css大边距但边框重叠[重复]

【英文标题】：css large margin but borders overlap [duplicate]

【发布时间】：2019-04-03 13:05:49

【问题描述】：

导航会向下移动到下一行，因此它们会留在浏览器中，也就是边框重叠的时候。我怎样才能使边界在它们之间垂直有空间？在水平方向上，边距正常工作，随着像素的增加在元素之间添加空间，但不是垂直方向。

.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-->

    

【问题讨论】：

请提供一些最小的 HTML，以便我们有一个示例（请参阅minimal reproducible example）。另请注意，还有一个 html/css/js 工具可用于使您的代码可内联运行。

好的。我添加了 HTML。对不起，我是新人。另外，在我有 10 分之前我不能添加照片，否则我会添加一张。

很好，好多了。请注意，您的 CSS 中有重复项，但可能与您的问题无关。

【参考方案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-->