首頁 > web前端 > css教學 > 請給我一些空間

請給我一些空間

Christopher Nolan
發布: 2025-03-13 12:22:10
原創
354 人瀏覽過

請給我一些空間

有各種方法可以做到這一點。當然,有些人比其他情況更適合某些情況。

我們可以直接在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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板