首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在Html <p>中设置行高,以便在<p>具有不同的字体大小时使html看起来像办公室字

在HTML中设置行高,以便在<p>具有不同的字体大小时使HTML看起来像是一个办公室字体。可以使用CSS来设置行高,如下所示:

代码语言:html
复制
<p style="line-height: 1.5;">这是一段文本,用于测试不同字体大小下的行高效果。</p>

其中,line-height属性用来设置行高,1.5是示例值,可以根据需要进行调整。注意,如果使用px单位,则可能会导致在不同浏览器中显示效果不同。因此,建议使用em单位或者rem单位来设置行高,以保证在不同字体大小下显示效果一致。

此外,如果需要让<p>元素在不同字体大小下显示效果一致,还可以使用CSS的font-size属性。例如,可以设置font-size: 16px,那么所有<p>元素中的文本都会按照16px的字体大小进行显示。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端入门系列之CSS

外部样式表 外部样式表是指:当你将你 CSS 保存在一个独立扩展名为 .css 文件,并从HTML 元素引用它。此时 HTML 文件看起来这样: <!...内部样式表 内部样式表是指不使用外部 CSS 文件,而是将你 CSS 放置 元素,该元素包含在 HTML head 内。此时HTML看起来这样: <!...但是要小心—em单位是会继承父元素字体大小,所以如果在父元素上设置不同字体大小,em像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块更详细地介绍继承和字体大小设置。...rem: REM(root em)和em同样方式工作,但它总是等于默认基础字体大小尺寸;继承字体大小将不起作用,所以这听起来一个比em更好选择,虽然旧版本IE上不被支持(查看关于跨浏览器支持...1 边距 margin: 0; 2 另一个例子是 line-height,设置元素每行文本高度。你可以使用单位设置特定高度,但使用一个无单位值往往更容易,它就像一个简单乘法因子。

2.6K10

20个 CSS 快速提升技巧

,我们只是告诉浏览器 让它渲染是 渲染字体大小1.5倍 6、垂直居中任何元素 (vertical-center anything) 没有准备使用CSSGrid 布局时候,设置垂直居中布局全局规则是一个很好方式...如果要在悬停应用突出显示,或在滑块设置子文本样式具有突出显示外观,则此功能尤其有用: .p { display: inline-block; box-decoration-break: clone...这迫使您为子元素任何链接编写额外覆盖和样式规则,并且使用WordPress这样CMS,可能会导致您主链接样式比按钮文本颜色更容易出现问题。...; } 18、灵活运用root类型 响应布局字体大小应该能够自动调整到视区,从而保存编写媒体查询工作,处理字体大小。...19、表单元素上设置字体大小获得更好移动体验 为了避免移动浏览器(iOS Safari等)点击下拉列表放大HTML表单元素,请在添加font-size样式: input[type

3.2K20
  • 请避免犯这9个常见 CSS “坏习惯”

    当您需要覆盖一些预定义样式增强可访问性。这种情况您尝试使网站对所有用户包括视力受损用户(低视力患者)都可访问时经常发生。...例如,如果您将元素字体大小设置为4em,则它将是父元素字体大小四倍。处理排版(文本)使用 em - 这使文本按比例缩放。 rem - 这是相对于根元素字体大小。...4、不使用CSS重置 不同浏览器具有各种默认样式,这些样式不同,导致元素外观不一致。这就是为什么我们必须定义一些样式,以便在其他浏览器上为网页样式提供一致起点。这些样式被称为“CSS重置”。...为了使事情看起来不那么抽象,这里是一个使用通用CSS选择器(*)实现简单CSS重置。...当您需要可重用代码,请使用类选择器。 如何避免使用过于复杂选择器 如果你在你样式表遇到了下面这样代码片段,那就意味着你正在使用过于复杂选择器。

    27310

    如何提升你CSS技能,掌握这20个css技巧即可

    ,这里声明没有单位,我们只是告诉浏览器 让它渲染是 渲染字体大小1.5倍 6、垂直居中任何元素 (vertical-center anything) 没有准备使用CSSGrid 布局时候,...如果要在悬停应用突出显示,或在滑块设置子文本样式具有突出显示外观,则此功能尤其有用: .p { display: inline-block; box-decoration-break:...这迫使您为子元素任何链接编写额外覆盖和样式规则,并且使用WordPress这样CMS,可能会导致您主链接样式比按钮文本颜色更容易出现问题。...none; } 18、灵活运用root类型 响应布局字体大小应该能够自动调整到视区,从而保存编写媒体查询工作,处理字体大小。...19、表单元素上设置字体大小获得更好移动体验 为了避免移动浏览器(iOS Safari等)点击下拉列表放大HTML表单元素,请在添加font-size样式: input[type

    5K20

    为你网页添加深色模式

    基本元素样式 接下来将会添加一些基本样式,其中包含一些来自Google字体,这样可使页面看起来更好一些。我们要设置所有基本元素样式,并应用新字体大小、颜色和字体。...容器样式 ? 为容器设置一个舒适阅读样式 接下来,为容器设置样式,把内容调整为为阅读舒适长度。另外还会添加背景颜色和阴影。...为了使页面内容框居中,边距属性左右值上使用关键 “auto”。...当然,你照片看起来这样 虽然滤镜方法我们文档内容上起了作用,但是看起来不太好 —— 例如盒子阴影也被倒置了,这看起来很奇怪。...创建自定义属性 为了使用自定义属性,我们:root元素内CSS顶部定义它们。根元素具有HTML 相同范围,因此可以全局使用。我们需要确定变量名称并定义它们值。

    1.6K30

    论CSS可使用font-size长度单位

    如果你希望一个自适应性网站根据不同断点设置放大或者缩小不同元素字体大小,你可以给 html和 body不同断点下设置不同 font-size。这样其中元素就都能够缩放了。...它们常用在自适应网站设计与根据不同页面宽度断点设置不同字体大小。...它们使你可以根据视窗尺寸大小控制字体 font-size。如果使用得当,它们还可以避免通过不同断点设置字体大小实现代码。这是因为这些单位值会随着视窗高度、宽度做连续性变化。...即便在IE9或者IE10版本里,使用rem给缩写 font属性设置字体大小时,都可能使赋值失败。这两个浏览器也不支持给伪元素使用rem单位。 本文讨论所有单位,视窗单位浏览器支持是最少。...相对单位里,你应该在模块当中使用em设置字体大小,给独立模块使用rem单位,例如给一个模块根元素使用rem。你也可以结合使用视窗单位和其他单位,来保证你排版会随着视窗宽变化而自动适应。

    2.4K20

    css基础第一弹

    有什么用:主要用于设置HTML页面文本内容(字体、大小、对齐方式等)、图片外形(宽、边框样式、边距等)以及版面的布局和外观显示样式。...选择器是用于指定CSS样式HTML标签,花括号内是对该对象设置具体样式 属性和属性值以键值对形式出现 属性是对指定对象设置样式属性,例如字体大小、文本颜色等 属性和属性值之间用英文:分开 多个...根据元素id来选择元素,具有唯一性,这说明一个id一个页面内只能出现一次,ID选择器#来定义,HTML中用id来引用。 注意事项:一个id属性只能在每个 HTML 文档中出现一次。...css 代码: p { text-indent: 2em; } 行间距 line-height属性用于设置行间距离()。可以控制文字之间距离.... 控制之间距离 总结思维导图

    10510

    《精通CSS》第4章 网页排版

    与垂直对齐 要彻底了解与垂直对齐。我们需要先了解下行盒子构造。构造如下图(书中图 4-5),大家可以仔细看看各部分含义。 ?...盒子总高度,内容区上下空白部分叫做半铅空(因为传统印刷用铅块隔开)。 其中,每个字符摆放时候,底边都是对齐于靠近底部一条水平线,这条线叫做基线。...至于为啥是至少,还和垂直对齐方式有关,下面说垂直对齐时候就知道了。 1. 设置 一般来说,取值范围是1.2~1.5。之间不能太密也不能太疏。...如下,我们可以给body设置line-height: 1.5;。 body { line-height: 1.5; } 没有单位,表示是当前字体大小 1.5 倍。...如下,我们可以这样设置字体特性(示例是开启了常用连和任意连): h1, h2, h3 { font-variant-ligatures: discretionary-ligatures;

    1.4K20

    css基础第一弹

    有什么用:主要用于设置HTML页面文本内容(字体、大小、对齐方式等)、图片外形(宽、边框样式、边距等)以及版面的布局和外观显示样式。...根据元素id来选择元素,具有唯一性,这说明一个id一个页面内只能出现一次,ID选择器#来定义,HTML中用id来引用。 注意事项:一个id属性只能在每个 HTML 文档中出现一次。...一般情况下,如果用空格隔开多个单词组成字体,加引号 字体大小 CSS 使用font-size属性定义字体大小 p { font-size: 20px; } px(像素)是网页中常用单位 不同浏览器默认字体大小是不一样...p { text-indent: 2em; } 行间距 line-height属性用于设置行间距离()。...none line-height 控制之间距离 总结思维导图

    1.9K20

    CSS基础学习(1)

    认识学习C 1-1 HTML内部添加样式 添加声明 1-2 字体大小/字体粗细 CSS,样式是由属性 和...) color: rgba(253,217,106,0.3); 注意 建议使用十六进制表达方式 调试可以用英文字母形式,初期调试就是随便设置一个颜色,查看区块是否存在等,合模型我们会遇到 设置文字透明度或者背景透明度...1-4 文字/间距/字体 设置格式:line-height: 30px; 作用:1、改变段落中行与之间距离 ​ 2、使文字上下居中,先写text-align...class="common color font-size"> common设置通用样式,color设置特殊颜色,font-size设置特殊字体大小 id选择器 定义 <p id="p-item...{ color: black; } p>span { color: orangered; } 4、并集选择器 给不同标签,或者不同类名标签添加相同样式 规则 标签名后或者类名后用逗号隔开

    78010

    HTML CSS 入门

    关键区别在于 Word 格式文本是可视,而 HTML 代码纯粹是语义HTML 基础 任何语言一样,HTML 带有一组规则。... 深度 由于子元素本身可以包含其他子元素,所以可以 HTML 文档编写更深层次结构。...CSS 通过设置字体、颜色,定义边距、定位元素、动画交互等等,使 HTML 文档栩栩如生。 CSS 是如何工作?...伪类选择器 HTML 元素可以具有不同状态。最常见情况是当您将鼠标悬停在链接上。当此类事件发生,CSS 可能会应用不同样式。...我们示例,该段落将为**红色,**因为#id选择器比其他选择器具有更高优先级。 CSS 规则顺序 如果您 CSS 中有类似的选择器,则最后定义选择器将具有优先权。

    5.1K20

    全栈之前端 | 8.CSS3基础知识之文本样式学习

    )文本断行表现 0x01 文本样式属性介绍 color 属性 - 文本颜色设置 描述: color 属性规定文本前景色( HTML 表现,就是元素文本颜色),请使用合理背景颜色和文本颜色搭配...* hanging 实验性: 该值会对所有的行进行反转缩进:除了第一之外所有的行都会被缩进,看起来就像第一设置了一个负缩进值。...语法参数: /* 自行判断,绘制文本,何时该优化速度,易读性或者几何精度 */ text-rendering: auto; /* 浏览器绘制文本将着重考虑渲染速度,而不是易读性和几何精度,它会使间距和连无效... 在上面的段落,文本第一个字母包含在一个 span 元素。这个 span 元素宽度是当前字体尺寸 0.7 倍。span 元素字体尺寸是 400%,是 80%。... 执行结果: letter-spacing 属性 - 设置文本字符间距表现 描述:此属性用于设置文本字符间距表现,渲染文本添加到字符之间自然间距,letter-spacing

    34420

    移动web开发之rem适配布局

    不同是rem基准是相对于html元素字体大小。 比如,根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px....only:指定某个特定媒体类型,可以省略 3.媒体特性 每种媒体类型都是具有各自不同特性,根据不同媒体类型媒体特性设置不同展示风格。我们暂且了解三个。...使用媒体查询根据不同设备按比例设置html字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放适配。...4.1 rem实际开发适配方案 按照设计稿与设备宽度比例,动态计算并设置html根标签font-size大小;(媒体查询) css,设计稿元素宽、、相对位置等取值,按照同等比例换算为rem...那么320px设备时候,字体大小为320/15就是21.33px 用我们页面元素大小 除以不同html 字体大小会发现他们比例还是相同 比如我们750为标准设计稿 一个

    1.9K20

    11种最佳编程字体哪款适合你?

    整体而言,文本看起来比其他字体更清晰,更不用说易于区分字符了。 ? 5. Menlo Menlo是macOS面向Xcode和Terminal新默认字体。...Space Mon Space Mono由Colophon Foundry设计,是一款优秀等宽字体。我不喜欢两个缺点是:14pt字体大小下,(1)l可能与1混淆,(2)两者无法区分。 ? 8....虽然我不喜欢字体连,因为我熟悉原始符号,看到合并字符觉得有点困惑,但我认为这种字体对其他人有所帮助。 ? 注意:VSCode,必须将下面这一添加到设置,那样才能实现字体连功能。...IBM 3270 IBM 3270基于IBM1971年制造IBM 3270终端中所使用字体。该字体非常适合编程,具有复古风(不过我不太习惯)。...请注意,这种字体相对较小,所以我建议是增加字体大小,减小线,以便在屏幕上更具可读性。 "editor.lineHeight": 20, "editor.fontSize": 14, ? 11.

    4.2K20

    【前端就业课 第二阶段】CSS 零基础到实战(02)标签类型、字体与图片

    一、块元素、行内元素、行内块元素 在学习CSS,我们需要搞清楚HTML 标签一些分类,HTML 一般可分为块元素、行内元素以及行内块元素,不同种类呈现上有着不同表现形式。...1.1 块元素 块元素有比较多特性,例如在 HTML 页面呈现为独占一,例如标题标签 、、 这些,当然也包括 标签元素这一类,这一类标签在页面独占一个,你在后面所编写内容将会自动换行显示...> 1.3 具有行内元素及块元素特点元素 行内块元素一般可以设置、并且一可显示多个,例如 img input 以及 td 元素。... 离离原上草 万里入海流 玉琼更上一层楼 以上示例设置了 body 下字体大小为 60px, p 标签字体设置,其大小设置为...,其中 2em 为两个字体大小,则完成首空格效果: 三、图片 3.1 图片透明度、圆角、宽设置 使用图片时会经常设置图片、圆角、透明度属性,以下是一个示例: <

    1.1K10

    前端程序员要懂 UI 设计知识

    作为一个前端工程师,如果你对 HTML 和 CSS 有基本了解,并希望浏览器创建美观用户界面,那就别到处乱找资料了!...顾名思义,它是页面上元素之间空间。 被压缩在没有留白页面上元素不仅看起来没有吸引力,而且难以浏览和阅读。 可以通过多种方式调整留白,包括填充、边距和。通过查看下图了解有效留白带来不同。...从下图中可以看到,第一页元素许多不同(弱对齐)远没有第二页吸引力和可读性好,而第二页具有很强对齐性: ? 页面对齐不良 ?...对比度差页面 具有良好对比度页面(如下面的页面)不仅看起来更好,而且更加用户友好和具有可访问性。 ?...很好例子 版式 版面设计对 UI 也有很大影响。有很多方法可以调整这个设置,包括字体选择、字体大小、对齐方式、字母间距、、字体样式、颜色和对比度等。

    1.2K10

    HTML、CSS温故而知新

    normal(400), bold(700) 2.3.4 line-height 用于设置多行元素空间量 如果 line-height 值没有单位,则是 font-size*line-height...CSS text-、font-、line- 开头属性都是可以继承 显示继承:inherit * { color: inherit; } html { color: red; } ..../p/7dadcc458410 2.6 块级元素与级元素区别 块级 级 不和其他盒子并列摆放 可以和其他级盒子一起放到一 适应所有的盒模型属性 盒模型 width、height 不适用...盒子内平行摆放 一放不下,换行显示 text-align 决定一内盒子水平对齐 vertical-align 决定一个盒子在行内垂直对齐 避开浮动(float)元素 2.7.2 块级排版上下文...2.9 Grid 布局 display: grid 使元素生成一个块级 Grid 容器 使用 grid-template 相关属性将容器划分为网格 设置每一个子项占哪些/列 暂时只是初略了解,之后还是得正式学

    90810
    领券