有各種方法可以做到這一點。當然,有些人比其他情況更適合某些情況。
我們可以直接在HTML中進行:
<p>我們從一行... <br> <br>再下幾個。</p>
但這就是CSS真正的目的:
<p>我們從一行... <span>再下幾個。</span> </p>
跨度{ 顯示:塊; 邊緣塊開始:1.5REM; }
線的高度還可以為我們提供文本行之間的額外呼吸空間:
p { 線高:1.35; }
由於我們在談論文字,所以還有字母間隔和單詞間隔,更不用說文本了:
但是,讓我們談談框而不是文字。說我們有兩個簡單的divs:
<div> twiddle dee </div> <div> twiddle dum </div>
這些是塊級別的,因此它們已經在不同的線路上了。我們可以再次達到利潤。或者我們可以用填充物創造出空間的印象。我想我們可以將這些吸盤朝任何方向翻譯:
Div:nth-child(2){ 變換:翻譯(100px); }
但是也許這些元素是絕對位置的,因此我們可以使用物理偏移:
div { 位置:絕對; } Div:nth-child(1){ 插圖:0; } Div:nth-child(2){ 插圖 - 啟動:100px; /*或頂部:100px; */ }
如果我們在網格容器中工作,那麼我們會得到差距:
<div> twiddle dee </div> <div> twiddle dum </div>
部分 { 顯示:網格; 網格 - 板柱:1FR 1FR; 差距:100px; }
與靈活的容器相同的協議:
部分 { 顯示:Flex; 差距:100px; }
當我們在網格和靈活的容器中工作時,我們可以呼籲任何對齊屬性生成空間。
部分 { 顯示:Flex; 對準項目:中間空間; 正當:中間的空間; }
當然有表:
Twiddle Dee | Twiddle Dum |
或CSS-Y方法:
/*如果我們不在表元素中工作,我們可以使用`display:table'。 */ 桌子 { 邊界間距:100px; }
讓我們深入左側。我們可以使用帶有硬色停止的線性梯度使一個元素看起來像兩個元素:
div { 背景圖像: 線性梯度( 右, RGB(255 105 0 /1)50%, RGB(207 46 46 /1)50%, RGB(207 46 46 /1)100% ); }
然後,我們做一個假的頭,並在兩種顏色之間插入堅硬的透明顏色停止:
只要我們在這裡烤培根,就可以拋棄“透明”邊界技巧:
讓我們回到文字片刻。也許我們正在浮動一個元素,並希望文本以浮動元素的形狀包裹起來,同時在兩者之間留出一些空間。我們為此有形狀淨值:
我敢我提到spacer.gif天嗎?
<div> twiddle dee </div> <img src="%E2%80%9C" spacer.gif alt="請給我一些空間" > <div> twiddle dum </div>
你們都是一個聰明的人,有很棒的主意。有!
以上是請給我一些空間的詳細內容。更多資訊請關注PHP中文網其他相關文章!