首页
学习
活动
专区
工具
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的像素值就会变得复杂。现在不要过于担心这个问题,我们将在后面的文章和模块中更详细地介绍继承和字体大小设置。...rem: REM(root em)和em以同样的方式工作,但它总是等于默认基础字体大小的尺寸;继承的字体大小将不起作用,所以这听起来像一个比em更好的选择,虽然在旧版本的IE上不被支持(查看关于跨浏览器支持...1 边距 margin: 0; 2 行高 另一个例子是 line-height,设置元素中每行文本的高度。你可以使用单位设置特定的行的高度,但使用一个无单位的值往往更容易,它就像一个简单的乘法因子。

2.7K10

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.3K20
  • 请避免犯这9个常见的 CSS “坏习惯”

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

    30810

    如何提升你的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属性用于设置行间的距离(行高)。可以控制文字行与行之间的距离....行高 控制行与行之间的距离 总结思维导图

    10810

    《精通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设置特殊字体大小 p> id选择器 定义 p id="p-item...{ color: black; } p>span { color: orangered; } 4、并集选择器 给不同的标签,或者不同的类名的标签添加相同的样式 规则 在标签名后或者类名后用逗号隔开

    78010

    HTML CSS 入门

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

    5.2K20

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

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

    38720

    移动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基于IBM在1971年制造的IBM 3270终端中所使用的字体。该字体非常适合编程,具有复古风(不过我不太习惯)。...请注意,这种字体相对较小,所以我的建议是增加字体大小,减小线高,以便在屏幕上更具可读性。 "editor.lineHeight": 20, "editor.fontSize": 14, ? 11.

    4.6K20

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

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

    1.1K10

    【CSS3】css开篇基础(1)

    p> p>这是另一个段落。p> html> 类选择器 CSS 中的类选择器用于选取具有特定类名的 HTML 元素。...p> html> ​ id 选择器 CSS 中的 ID 选择器用于选取具有特定 id 属性的元素,ID 选择器在 CSS 中使用井号(#)后跟 ID 名称来定义。...每个 id 在页面中是唯一的,因此 ID 选择器通常只能应用于单个元素。 在 HTML 中,每个 id 属性值只能在页面中使用一次,但页面中可以有多个不同的 id 值。...line-height line-height属性用于设置行间的距离(行高)。...可以控制文字 行与行之间的距离。 p{ line-height:26px; } 当我们设置行间距为26px时,字体大小为16px,行间距代表如下: 那么怎么精准测量好行间距呢?

    10510

    前端程序员要懂的 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 相关属性将容器划分为网格 设置每一个子项占哪些行/列 暂时只是初略了解,之后还是得正式学

    91310
    领券