保證金最大問題

<img src="/test.png" style="margin-top:20px;margin-left:20px" title="Hello" border="1" height="100" width="110" /> 
<span style="text-shadow: 1px 1px 17px #347235;margin-left:20px;margin-top:-20px">Test span</span>

會發生什麼情況是圖像顯示，但「測試範圍」消息打印在圖像的右側，根據margin-left：20px，但margin-top沒有做標籤顯示在圖像底部的任何內容。我希望它能夠像圖像出現在頂部顯示，但標籤顯示在底部。保證金最大問題

你可以在這裏看到：http://jsfiddle.net/AMWjH/

請幫

來源

2011-12-09 DemCodeLines

可以更改vertical-align屬性來更改如何元件的顯示器。我認爲這將vertical-align: top到圖像解決您的問題：

前瞻：http://jsfiddle.net/Wexcode/AMWjH/23/

而且，爲什麼邊距和下邊距不影響您span元素的原因是因爲跨度是一個內聯元素。您可以將其更改爲嵌入塊或塊以應用此邊距（將其更改爲塊將覆蓋垂直對齊）。

來源

2011-12-09 03:31:32 Wex

從我收集的內容中，您想要圍繞圖像包裝文字。你只需要一個align屬性添加到您<img>標籤：

<div style="padding: 20px;"> 
<img src="/test.png" style="margin-left:20px; margin-right: 20px;" title="Hello" border="1" height="100" width="110" align="left" /> 
<span style="text-shadow: 1px 1px 17px #347235;">Test span</span> 
</div>

來源

2011-12-09 03:33:42 sooper

我不能確定你問什麼，但它聽起來像是你想要的標題去圖像的權利，但與頂部對齊。我理解這個問題嗎？試試這個：

HTML：

<div class="titledImage"> 
    <img src="/test.png" title="Hello" width="110" height="100" /> 
    <p>The Title</p> 
</div>

CSS：

.titledImage img { 
    float: left; 
}

來源

2011-12-09 03:33:46

你爲什麼要構建代碼這種特別的方式？如果沒有完全瞭解自己的侷限性，我會強烈推薦這樣做：（當然，將內聯樣式放到樣式表中）。

<div style="height: 140px; width: 150px;"> 
    <p style="text-shadow: 1px 1px 17px #347235; text-align: center;">Test span</p> 
    <img src="http://ressim.net/upload/dce92a76.png" style="padding:0 20px 20px;" title="Hello" border="1" /> 
</div>

讓我知道這是否爲你解決它。沒有理由使用毛利&負邊距。不過，在這種特殊情況下，邊距或填充可以用於圖像。通常情況下，如果可能的話避免負邊距，並且只有在絕對必要時才使用它們。

我希望這會有所幫助。

來源

2011-12-09 03:36:14

保證金最大問題

回答

相關問題