減少文字

的兩個部分之間的垂直空間，我想，以減少兩個部分之間的垂直空間，然而，處於CSS旋鈕於事無補。使用表格（heh）她已經不在了，但是用CSS我把頭髮拉出來。減少文字

如果你複製/粘貼下面的代碼，你會發現「鏈接標題」和「www.123.com」之間的垂直間距比「www.123.com」和「一些文字」之間的不同：

Link Heading... 
www.123.com 
Some more text...

這裏的瘦

<head> 
<style> 
body{font:13px/27px Arial,sans-serif} 
.link{color:#0000cc} 
.heading{float:left;font-size:1.2em;margin:0;font-weight:normal} 
.result{font-size:0.850em;line-height:1em;margin-bottom:20px} 
.site,.info{float:left;font-size:1em} 
.info{color:#222234} 
</style> 
</head> 
<body> 
    <a class=link href='http://www.123.com/'> 
     <span class=heading>Link Heading...</span> 
    </a> 
    <br> 
    <div class=result> 
     <span class=site>www.123.com</span> 
     <br> 
     <span class=info>Some more text...</span> 
    </div> 

<br> 
<table border=0 cellspacing=0 cellpadding=0> 
<tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr> 
<tr><td>www.123.com</td></tr> 
<tr><td>Some more text...</td></tr> 
</table> 
</body>

現在我知道答案將是明顯的東西，但我無法看到的受詛咒的CSS樹木，不見森林了。

我會很感激任何指針。

感謝

來源

2011-12-06 G Kent

爲什麼'float：left'？ – HerrSerker

當然它是不同的，你不要在表格中使用相同的樣式 – HerrSerker

風格與它無關。浮動只是從大文件中提取。即，這只是一個片段，使其更容易閱讀/解析。 –

使用CSS line-height:或者是負面的margin:更改垂直空間也可以肯定的，如果你使用的是休息 ，他們height:也改變了垂直空間

來源

2011-12-06 14:30:45 ggzone

就是這樣！非常感謝： '.result {font-size：0.850em; line-height：1em; margin：-4px 0 20px 0px}' –

這是因爲錶行（）有27像素的高度。如果您將類設置爲info和style .info {height：27px;顏色：＃222234}，它們將與表格中的高度相同。

<div class=result> 
     <span class=info>www.123.com</span> 
     <br> 
     <span class=info>Some more text...</span> 
    </div>

來源

2011-12-06 14:39:48 Oedum

我建議擺脫你的 標籤，並使用Block Element。

從相關Block formatting contexts：

在塊格式化內容，盒被佈局一前一後，垂直，在包含塊的頂部開始。 2個兄弟箱之間的垂直距離由「餘量」性質決定。塊格式化上下文的相鄰塊級別框之間的垂直邊距摺疊。

這意味着塊元件，諸如<div>和（等等）將自動包括後他們換行符，以及它們之間的空間可以用margin進行控制。因此，我會改變你的代碼看起來更像如下：

<body> 
    <div class="heading"> 
     <a class=link href='http://www.123.com/'>Link Heading...</a> 
    </div> 
    <div class=result> 
     <p class=site>www.123.com</p> 
     <p class=info>Some more text...</p> 
    </div> 

    <table border=0 cellspacing=0 cellpadding=0> 
     <tr><td><a class=link href='http://www.123.com/'>Link Heading...</a></td></tr> 
     <tr><td>www.123.com</td></tr> 
     <tr><td>Some more text...</td></tr> 
    </table> 
</body>

一對夫婦的其他挑剔：在你的屬性值（...）

不要使用

使用引號佈局表（使用表格的表格數據是好的）
正確縮進使代碼的可讀性

來源

2011-12-06 14:44:39

感謝Ryan - 表格僅用於比較目的。事實上，整個片段是複製/粘貼，然後編輯/減少張貼在這裏。您關於Block Element的鏈接/評論正是我正在尋找的內容 - 儘管@ggzone提供了一個可行的替代建議（即，我不必重新編碼所有內容）。 –

嗨，這裏是一個簡單的解決方案，把所有的東西和相同的div，只使用「a」應用鏈接樣式。

<head> 
<style> 
body{font:13px/27px Arial,sans-serif} 

.result{ 
    font-size:0.850em; 
    line-height:1.2em; 
    margin-bottom:20px 
    } 

.result a 
{ 
    float:left; 
    font-size:1.2em; 
    margin:0; 
    font-weight:normal 
} 

.result a:link 
{ 
    color:#0000cc; 
    text-decoration: underline; 
} 
.result a:hover 
{ 
    color: #1a0186; 
    text-decoration: none; 
} 
</style> 
</head> 
<body> 

    <div class=result> 
     <a href='http://www.123.com/'>Link Heading...</a><br> 
     www.123.com <br> 
     Some more text... 
    </div> 

</body>

來源

2011-12-06 15:05:14

謝謝，這是一個很好看的乾淨的方法。 –

回答

相關問題