有各种方法可以做到这一点。当然,有些人比其他情况更适合某些情况。
我们可以直接在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中文网其他相关文章!