CSS - 當保證金沒有效果時要注意什麼

我實際上是一個HTML和CSS的noob，我不會一直生活在這個空間裏保留和進步，所以隨意把我當成一個白癡。CSS - 當保證金沒有效果時要注意什麼

很多時候，當我設計一個頁面時，頁邊空白不起作用。例如，下面的代碼片段：

<h1>Title</h1> 
<p>I introduce the section and talk about the stuff in this area.</p> 
<div class="preWrapper"> 
    <pre><code>I am some XML</code></pre> 
</div> 
<div class="controlsWrapper"> 
    <a href="...">Download XML</a> 
    < ... form controls, input etc. ... > 
<div>

如果我嘗試設置在下載XML錨上邊距，它具有任意大小沒有影響。爲什麼會這樣呢？

這裏有一個普遍的教訓，關於這一切的工作方式，我要麼保持遺忘，要麼還沒有完全掌握。

我已經閱讀了封面到封面的大尺寸CSS書 - 我確實嘗試過 - 而且我已經是一個大約6年的netmag用戶。我知道有很多怪癖和陷阱，我只是不記得他們。

謝謝。

來源

2013-08-01 Luke Puplett

@詹姆斯·唐納利：我不知道也這樣覺得。 – BoltClock

這是Alien先生的鏈接，而不是James Donnelly的副本。它不是問題，它的原因。 –

啊，出於某種原因，我將該錨定爲段落。傻我！ –

我認爲在這些情況下，您可能主要遇到塊級元素和內聯元素之間的差異。

在HTML中，塊級元素用於較大的內容部分，並且通常包含其他元素。您可以使用它們來佈置頁面上的所有內容。塊級元素例如是section,div,header。

內聯元素是較小的標記，可以包含鏈接或小塊文本，如a或span。儘管塊級元素會自動將您自己置於佈局中的新行，但是按照定義，內聯元素將保留在標記中的確切位置。

由於這種區別，塊級元素通常可以通過在不可見的，明確定義的塊內部，通常跨越頁面的寬度。像這樣的塊，你可以很容易地想象填充和邊距，因爲它的邊緣是明確的。但是，內聯元素很棘手，並且不會在任何特定的塊或矩形內呈現它們 - 它們的尺寸僅在其內部的文本中定義。這就是爲什麼應用利潤率更難。

上面的修復方法是給你的a一個display: block風格的CSS。它將默認佔用頁面的整個寬度，其高度將與文本大小所需的一樣大。可以很容易地添加邊距和填充。

如果你再遇到不想要你的a要這麼寬，但位置本身緊貼旁邊的其他元素，你可以在display屬性更改爲inline-block - 這可以被認爲是作爲之間的一種半路上塊和內聯元素。它只會和內部的文本一樣寬，但它會得到圍繞它的虛構矩形，然後可以通過邊距和填充使其更大。

下面是一些閱讀：The CSS box model

來源

2013-08-01 10:23:33 Elise

不好誤解你的問題。

您需要將您的<a>轉換爲inline-block元素才能使用。

這是代碼。

的代碼：

<a href="..." style="display: inline-block; margin-top: 40px;">Download XML</a>

PS： 40像素爲邊距的虛設值。您可以用您的價值取代它。

來源

2013-08-01 10:17:52 Nitesh

當盒式模型修復未設置時，這是否工作？ http://www.paulirish.com/2012/box-sizing-border-box-ftw/ –

沒有。沒有它，它也可以工作。 – Nitesh

好的。在實踐中，至少對於這種標記來說，它將元素向上推出並超出前面的代碼，而不是向下移動任何東西。 –

如果您有相對或絕對定義元素的立場，即時間價值保證金是行不通的，因爲這可以嘗試使用top

來源

2013-08-01 10:26:40

CSS - 當保證金沒有效果時要注意什麼

回答

相關問題