請給我一些空間
有各種方法可以做到這一點。當然,有些人比其他情況更適合某些情況。
我們可以直接在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中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

您是否曾經在項目上需要一個倒計時計時器?對於這樣的東西,可以自然訪問插件,但實際上更多

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

在元素個數不固定的情況下如何通過CSS選擇第一個指定類名的子元素在處理HTML結構時,常常會遇到元素個數不�...
