目录
还有更多
首页 web前端 css教程 请给我一些空间

请给我一些空间

Mar 13, 2025 pm 12:22 PM

请给我一些空间

有各种方法可以做到这一点。当然,有些人比其他情况更适合某些情况。

我们可以直接在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

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue团队完成了完成,我知道这是一项巨大的努力,而且很长时间。所有新文档也是如此。

使用Redwood.js和Fauna构建以太坊应用 使用Redwood.js和Fauna构建以太坊应用 Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

您可以从浏览器获得有效的CSS属性值吗? 您可以从浏览器获得有效的CSS属性值吗? Apr 02, 2025 pm 06:17 PM

我有人写了这个非常合法的问题。 Lea只是在博客上介绍了如何从浏览器中获得有效的CSS属性。那样的是这样。

带有粘性定位的堆叠卡和一点点的杂物 带有粘性定位的堆叠卡和一点点的杂物 Apr 03, 2025 am 10:30 AM

前几天,我发现了科里·金尼文(Corey Ginnivan)网站上的这一点,当您滚动时,彼此之间的卡片堆放集。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适,但我喜欢Max Lynch的框架:

比较浏览器的响应式设计 比较浏览器的响应式设计 Apr 02, 2025 pm 06:25 PM

这些桌面应用程序中有许多目标是同时在不同的维度上显示您的网站。因此,例如,您可以写作

在WordPress块编辑器中使用Markdown和本地化 在WordPress块编辑器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我们需要直接在WordPress编辑器中向用户显示文档,那么最佳方法是什么?

为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? 为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”? Apr 05, 2025 pm 05:51 PM

关于Flex布局中紫色斜线区域的疑问在使用Flex布局时,你可能会遇到一些令人困惑的现象,比如在开发者工具(d...

See all articles