如何創建一個邊框，將輪廓div減去邊距

Question

好吧，我有一個問題。我使用的是960 gs，從代碼中可以看出，這對我來說至少是一個複雜的佈局。我的問題的一部分是所有應該有一個10px的排水溝。但有些div沒有。所以爲了實現我想要的佈局，我必須爲某些div添加10px的頂部邊距。那麼我需要添加一個懸停效果填充顏色變化的div。就像你可以在div上看到的那樣，我添加了10px的邊框。沒有達到我想要的。我建立了一個類和一些jquery，它將刪除邊距，但當你將鼠標懸停在這些div上時，它們會移動/移動。再次沒有達到我想要的效果。請幫忙 - 要麼我怎樣才能修復我的網格系統，所以我不必添加頂部邊距，或者如何添加不包含我的邊距的填充。我的HTML低於但我把我所有的代碼，js和css上的jsfiddle，請參閱：http://jsfiddle.net/penrysh/mr99962t/

<div class="page"> 
<div class="container_14"> 
<div class="grid_6 alpha omega"> 
<div class="grid_6 alpha"> 
<article class="grid_4 alpha results"> 
<div id="bulletin" class="tooltip" title="Tip1"> 
<h2>Bulletin Board</h2> 
<p></p> 
</div> 
</article> <!-- end Bulletin Board --> 
<article class="grid_2 omega results"> 
<div id="take5" class="tooltip" title="Tip2"> 
<ul> 
<li><h3>Take 5</h3></li> 
<li><img src="http://placehold.it/75x75" alt="Learning Break icon" /></li> 
<li><a href="#take5Box" title="Take 5 Learning Break" class="lightbox">Learning Break</a></li> 
<div id="take5Box"> 
<h3>Take 5</h3> 
<p>More content...</p> 
<a href="#">Take 5</a> 
</div> 
</ul> 
</div> 
</article> <!-- end Take 5 --> 
<article class="grid_2 omega results1"> 
<div id="longTerm" class="tooltip" title="Tip3"> 
<ul> 
<li><h3>Long Term</h3></li> 
<li><img src="http://placehold.it/75x75" alt="Long Term Learning icon" /></li> 
<li><a href="#longTermBox" title="Long Term Learning" class="lightbox">Learning</a></li> 
<div id="longTermBox"> 
<h3>Long Term Learning</h3> 
<p>More content...</p> 
<a href="#">Long Term Learning</a> 
</div> 
</ul> 
</div> 
</article> <!-- end Long Term --> 
<div class="clear"></div> 
<article class="grid_6 alpha omega results1"> 
<div id="career" class="tooltip" title="Tip4"> 
<h2>Career Insight: Highlight your work!</h2> 
<p>Create a Sharepoint blog where you can link to, upload, and discuss your work. It all becomes part of your professional portfolio.</p> 
</div> 
</article> <!-- end Career Insight --> 
</div> 
</div> 

<div class="grid_8 omega"> 
<div class="grid_8 omega"> 
<article class="grid_8 alpha omega results"> 
<div id="whatIs" class="tooltip" title="Tip5"> 
<h2>What is the Learning and Development Network?</h2> 
</div> 
</article> <!-- end What is --> 
<div class="clear"></div> 
<article class="grid_6 alpha results1"> 
<div id="featured" class="tooltip" title="Tip6"> 
<h2>Featured Courses</h2> 
<table> 
<tbody> 
<tr> 
<td><img src="http://placehold.it/75x75" alt="Health Care 101" /></td> 
<td><a href="#"></a></td> 
</tr> 
<tr> 
<td><img src="http://placehold.it/75x75" alt="Our Values" /></td> 
<td><a href="#">Our Values</a></td> 
</tr> 
</tbody> 
</table> 
</div> 
</article> <!-- end Featured courses --> 

<article class="grid_2 omega results1"> 
<div id="kl" class="tooltip" title="Tip7"> 
<ul> 
<li><img src="http://placehold.it/75x75" alt="" /></a></li> 
<li><a href="#klBox" title="" class="lightbox"></a></li> 
<div id="klBox"> 
<h3></h3> 
<p>More content...</p> 
<a href="#"></a> 
</div> 
</ul> 
</div> 
</article> <!-- end KL --> 
<article class="grid_2 omega results1"> 
<div id="myLearning" class="tooltip" title="Tip8"> 
<ul> 
<li><img src="http://placehold.it/75x75" alt="" /></li> 
<li><a href="#myLearningBox" title="M" class="lightbox">My Learning</a></li> 
<div id="myLearningBox"> 
<h3></h3> 
<p>More content...</p> 
<a href="#"></a> 
</div> 
</ul> 
</div> 
</article> <!-- end --> 
</div> 
</div> 
<div class="clear"></div> 
</div> <!-- end Container --> 
</div> <!-- end Page --> 

Answer 1

請看一看這個jsFiddle，我相信這是你所需要的。我所做的是我已經爲results1類中的每個元素設置了margin-top的margin-top,10px，並刪除了您爲不同元素設置的10px的所有前margin-top。由於您正在設置results1_hover類的邊框，因此需要將margin-top應用於該邊框，而不是其子容器。