如何申請邊框間距與CSS

我至今（某種例子，不是真實的）：如何申請邊框間距與CSS

HTML：

<html> 
<body> 
<div id="article"> 
<h1>TITLE</h1> 
<p>text</p> 
</div>

CSS

#article { 
color:red; 
border-bottom: 1px solid black; 
}

THE問題！

我不能分割在底部邊框和DIV本身

這可能會幫助你>> http://dl.dropbox.com/u/22271794/div.PNG

解決！

HR TAG幫我！在Google中搜索> HR TAG STYLING是這樣的（MARGIN ZERO，CHANGE COLOR）

來源

2012-01-10 ZENKES

嘗試增加餘量和/或填充。 – TJHeuvel 2012-01-10 15:20:48

我建議您閱讀更多關於CSS的教程或文檔，並嘗試改進您提出問題的方式。少一點吶喊和一些更多的努力會讓你走很遠:) – TJHeuvel 2012-01-10 15:22:14

請提供你使用的解決方案，以對你自己的問題的新答案的形式，這樣這個問題將有助於未來的訪問者。 – KatieK 2012-01-23 19:54:24

邊框放置在div的底部。這就是關鍵所在，對此你無能爲力。如果您希望將其與div內的內容在視覺上分開，則應在底部添加一些填充。

來源

2012-01-10 15:20:48

已經嘗試過:(它只是擴大了div本身（它的顏色也是），它沒有其他的東西 – ZENKES 2012-01-10 15:23:48

是的，padding擴展了div如果你想邊框實際上與div分開，你需要放入一個完全不同的元素 – 2012-01-10 15:35:04

只需設置一個padding-bottom到div本身，例如

#article { 
    color   : red; 
    border-bottom : 1px solid black; 
    padding-bottom : 1.5em; 
}

來源

2012-01-10 15:21:04 fcalderan

您是在查找padding或margin？與那些你可以風格的div和它的邊界的位置。

#article { 
color:red; 
border-bottom: 1px solid black; 
padding-bottom: 1px; 
}

~~如果這不是你的意思，你是什麼意思與劃分邊界？~~ 這不是你的意思。

編輯：看到你還說圖像後，我想你應該找一些其他的解決辦法，然後純CSS。我會看到一個解決方案，其中包含一些擁抱底部的元素，並且是白色的。

<div id="article"> 
<div></div> 
</div> 

#article { 
color:red; 
border-bottom: 1px solid black; 
padding-bottom: 1px; 
} 

#article div { 
// add some positioning. 
margin-top: 99%; 
height: 1%; 
color: white; 
}

這應該給你一些控制你需要的空白。再一次，我不認爲有可能在CSS上單獨做到這一點。

來源

2012-01-10 15:21:26 FWijmans

是的，我的意思是說 – ZENKES 2012-01-10 15:25:22

非常感謝你，FEEDBACK SENT，但使用hr標籤是非常簡單 – ZENKES 2012-01-10 15:33:34

如果您使用的是圖像，那麼你可以做這樣的：

img { 
    padding-bottom:10px; 
    border-bottom: 5px solid red; 
}

See this jsfiddle

但如果您使用的是div與背景，那麼你可以用它做產生差距的額外div。例如：

<div> 
    <div id="content"></div> 
    <div id="space"></div> 
    <div id="border"></div> 
</div>

和CSS：

#content { 
    width:200px; 
    height:100px; 
    background:#000; 
} 

#space { 
    width:200px; 
    height:20px; 
} 

#border { 
    width:200px; 
    height:10px; 
    background:red; 
}

See this jsfiddle

來源

2012-01-10 15:40:19 bravokiloecho

它可以用CSS來實現，但可能不會做事的大多數跨瀏覽器友好的方式。

HTML

<div>Text Here</div>

CSS

div, div:after { 
    display:block; 
    background:#00f; 
    width:100px; 
} 

div:after { 
    content:" "; 
    border-top:1px solid #FFF; 
    border-bottom:3px solid #000; 
}

演示http://jsfiddle.net/2BQ8f/

來源

2012-01-10 15:45:21 Tank

如何申請邊框間距與CSS

回答

相關問題