首页 > 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
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板