line-height行高属性的使用技巧

合集下载

IE6行高line-height失效问题的解决方法

解决方法是对与文字相连接的img、input、textarea、select、object等元素加以属性，代码如下：
.line-height{
margin:(所属line-height-自身img,input,select,object高度)/2px 0;
vertical-align:middle;
</head>
<style type="text/css">
.hh li{ line-height:50px; }
.hh li img{margin:20px 0;vertical-align:middle; } 
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>IE6行高line-height失效问题的解决方法--捷扬网络</title>
就等于 margin:(100-20)/2px 0 = margin:40px 0;
大致效果是有了，肯定还是有点小偏差，input高度是我假设20的。
*/
.aa input{ margin:40px 0; vertical-align:middle; }
</style>
<div class="aa">居中对齐 <input name="" type="text" /></div>

前端学习--Css--行间距

前端学习--Css--⾏间距在CSS并没有为我们提供⼀个直接设置⾏间距的⽅式，我们只能通过设置⾏⾼来间接的设置⾏间距，⾏⾼越⼤⾏间距越⼤。

使⽤line-height来设置⾏⾼。

⾏⾼类似于我们上学单线本，单线本是⼀⾏⼀⾏，线与线之间的距离就是⾏⾼，⽹页中的⽂字实际上也是写在⼀个看不见的线中的，⽽⽂字会默认在⾏⾼中垂直居中显⽰。

⾏间距 = ⾏⾼ - 字体⼤⼩。

通过设置line-height可以间接的设置⾏⾼，可以接收的值：1.直接就收⼀个⼤⼩；2.可以指定⼀个百分数，则会相对于字体去计算⾏⾼；3.可以直接传⼀个数值，则⾏⾼会设置字体⼤⼩相应的倍数。

对于单⾏⽂本来说，可以将⾏⾼设置为和⽗元素的⾼度⼀致，这样可以是单⾏⽂本在⽗元素中垂直居中。

在font中也可以指定⾏⾼在字体⼤⼩后可以添加/⾏⾼，来指定⾏⾼，该值是可选的，如果不指定则会使⽤默认值。

⽰例demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*** line-height如果是证书,值越⼤,间距越⼤*/.p1 {font-size: 35px;line-height: 2;}.box {width: 200px;height: 200px;background-color: #bfa;/** 设置“我是⼀个超链”接居中对齐*/line-height: 200px;}.p2 {/*font: 30px "微软雅⿊";line-height: 50px;*/font:30px/50px "微软雅⿊";}</style></head><body><p class="p2">⼈⽣若只如初见，何事秋风悲画扇。

line-height与height的区别

line-height与height的区别line-height是⾏⾼的意思，它决定了元素中⽂本内容的⾼度，height则是定义元素⾃⾝的⾼度。

height：表⽰⾏⾼line-height：表⽰每⾏⽂字所占的⾼度举例：第⼀种情况：使⽤height结果：第⼆种情况：⾏⾼为50px和⽂字⾼度为20px情况：这时候⽂字会居中显⽰（对于⽂字为什么会居中显⽰问题解释如下：我们把line-height设置为50px，也就是说这⾏⽂字会占50px,但是显然每个字的⼤⼩只有20px，这时候浏览器把多出来的30px,在⽂字上⾯加了15px,⽂字下⾯加了15px这个时候⽂字就在50px的空间上居中了）结果：第三种情况：设置了⽂字⾼度和⽂字⼤⼩⼀样的此时满屏显⽰结果：“⾏⾼”顾名思意指⼀⾏⽂字的⾼度。

具体来说是指两⾏⽂字间基线之间的距离。

CSS中起⾼度作⽤的就是height以及line-height！如果⼀个标签没有定义height属性(包括百分⽐⾼度)，那么其最终表现的⾼度⼀定是由line-height起作⽤先说⼀个⼤家都熟知的现象，有⼀个空的div标签，如果没有设置⾄少⼤于1像素⾼度height值时，该div的⾼度就是个0。

如果该div⾥⾯打⼊了⼀个空格或是⽂字，则此div就会有⼀个⾼度。

那么您思考过没有，为什么div⾥⾯有⽂字后就会有⾼度呢？这是个看上去很简单的问题，是理解line-height⾮常重要的⼀个问题。

可能有⼈会跟认为是：⽂字撑开的！⽂字占据空间，⾃然将div撑开。

但是深⼊理解inline模型后发现，根本不是⽂字撑开了div的⾼度，⽽是line-height！要证明很简单(如下测试代码)：CSS：.test1{font-size:20px; line-height:0; border:1px solid #cccccc;}.test2{font-size:0; line-height:20px; border:1px solid #cccccc;}HTML:<div class="test1">测试</div><div class="test2">测试</div>结果：结果是如此的显⽽易见，test1 div有⽂字⼤⼩，但⾏⾼为0，结果div的⾼度就是个0；test2 div⽂字⼤⼩为0，但是有⾏⾼，为20像素，结果div⾼度就是20像素。

CSSline-height行高上下居中垂直居中样式属性

CSSline-height⾏⾼上下居中垂直居中样式属性常常使⽤line-height设置内容（图⽚、⽂字）⾏⾼上下居中样式效果。

⼀、line-height⾏⾼语法复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%}line-height:+数字+单位（在CSS布局中我们⼀般采⽤像素px为单位）⾏⾼line-height的值可以为百分⽐数字 | 由浮点数字和单位标识符组成的长度值，允许为负值。

其百分⽐取值是基于字体的⾼度尺⼨。

⼆、⾏⾼应⽤介绍Line-height⾏⾼属性，运⽤到对⽂字排版，实现上下排⽂字间隔距离，以及单排⽂字在⼀定⾼度情况上下垂直居中布局。

1、对于⽂章类⽂字上下排间隔⼀般我们对对象设置设置line-height⾏⾼属性即可实现让⾃动换⾏⽂字排版均匀间隔多少设置。

2、对单排⽂字上下垂直居中假如我们⼀个固定30px⾼度div对象，如果要让其⽂字内容上下垂直居中，我们即可使⽤line-height:30px即可。

三、line-height案例我们设置两个div对象盒⼦，⼀个是多排⽂字⾏⾼设置；另外⼀个⾼度固定⼀排⽂字，实现⽂字中此⾼度固定内上下垂直居中。

两个案例我们都使⽤css line-height实现。

1、css代码⽚段复制代码代码如下:.jb511{ line-height:20px }/* ⾏⾼20px */.jb512{ line-height:30px; height:30px;}/* ⾼度固定上下居中 */2、html代码⽚段复制代码代码如下:<div class="jb51">我是第⼀排我是第⼆排我是第三排</div><div class="jb51">我⾼度为30px,实现上下居中</div>line-height总结line-height⾏⾼上下居中属性样式，使⽤于多排⽂字如⽂章内容实现⽂字上下排间隔居中属性，以及单排⾼度固定的上下垂直居中。

css设置行间距的代码

CSS设置行间距的代码一、行间距的作用及效果行间距（line-height）是CSS中一项常用的样式属性，它用于控制行与行之间的垂直间距。

设置合适的行间距可以提升文本的可读性、美观度以及排版效果。

设置行间距会影响文字的垂直高度，从而使得文字更加易读。

一个合适的行间距能够增加文字的清晰度、减少阅读时眼睛的频繁跳动，使读者更加舒适地阅读页面上的文本内容。

同时，行间距也可以用来调整行高度，从而达到优化页面排版布局、增加页面空白间隔的效果。

通过调整行间距，可以改变文字的垂直分布，使得页面整体更加美观。

二、CSS设置行间距的方法要改变行间距，可以通过CSS样式表的方式来实现。

以下是几种设置行间距的方法：1. 使用line-height属性line-height属性用于设置行间距，可以通过以下几种方式指定行间距的值：•使用绝对单位（像素）：例如line-height: 20px;•使用相对单位（em）：例如line-height: 1.5em;•使用百分比：例如line-height: 150%;2. 使用padding属性除了使用line-height属性，还可以使用padding属性来设置行间距。

通过给文本容器添加上下内边距，可以调整行间距的大小。

p {padding-top: 10px;padding-bottom: 10px;}3. 使用margin属性margin属性也可以用于设置行间距。

将相邻文本容器之间的外边距设置为所需的行间距值，即可实现调整行间距的效果。

p + p {margin-top: 20px;}三、行间距的最佳实践在设置行间距时，需要根据具体情况来选择合适的数值。

以下是一些行间距的最佳实践：1. 根据字体大小选择行间距通常情况下，行间距的数值应该与字体大小保持一定的比例关系。

一般来说，行间距的数值为字体大小的1.2倍到1.5倍之间，可以根据实际情况进行微调。

2. 不宜过大或过小的行间距行间距过大会导致页面排版混乱，看起来松散不紧凑；行间距过小会导致文字紧密排列，不易阅读。

解决line-height=height元素高度但是文字并没有垂直居中的问题

解决line-height=height元素⾼度但是⽂字并没有垂直居中
的问题
先说下为什么line-height等于元素⾼度⽂字却没有垂直居中，其实line-height等于元素⾼度的时候⽂本并不是真的居中了，⽽是看着居中了，当元素⾼度和font-size差距较⼤的时候，这种不是真正的居中就越发的明显，这⾥可以参看下什么是基线?
下图中的绿⾊线就是基线：line-height，指的是两⾏⽂字【基线】之间的距离
解决⽅案⼀、
结合⾏⾼、对齐的关系并结合伪元素
.text{
width: 16px;
height: 16px;
font-size: 10px;
text-align: center;
}
.text::after{
content: ' ';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-top: 1px;
}
解决⽅案⼆、
使⽤CSS3 scale属性，设置时将所有的值设置⼤⼀倍，然后缩⼩⼀倍
.text{
width: 32px;
height: 32px;
line-height: 32px;
font-size: 20px;
text-align: center;
transform: scale(0.5);
}
到此这篇关于解决line-height=height元素⾼度但是⽂字并没有垂直居中的问题的⽂章就介绍到这了,更多相关line-height=height元素⾼度内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章，希望⼤家以后多多⽀持！。

css3 元素对齐

css3 元素对齐CSS3是一种强大的样式表语言，它提供了许多用于对齐元素的属性和方法。

在本文中，我们将讨论一些常见的 CSS3 元素对齐技术，以及如何使用它们来实现各种布局。

一、水平对齐1. text-align 属性text-align 属性用于水平对齐文本。

它可以设置为 left、right、center 或 justify，分别代表左对齐、右对齐、居中和两端对齐。

例如：```.container {text-align: center;}```2. margin 属性margin 属性可以用于水平对齐块级元素。

设置 margin-left 和margin-right 属性的值为 auto 可以使元素水平居中对齐。

例如：```.container {width: 50%;margin: 0 auto;}```3. flexbox 布局flexbox 是一种强大的布局模式，它可以轻松实现水平和垂直对齐。

使用 display: flex 将容器元素设置为 flex 容器，然后使用justify-content 属性来指定子元素的水平对齐方式。

例如：```.container {display: flex;justify-content: center;}```二、垂直对齐1. line-height 属性line-height 属性用于设置行高，它可以用于垂直对齐内联元素和行内块元素。

将 line-height 属性的值设置为等于容器高度可以使元素垂直居中对齐。

例如：```.container {height: 100px;line-height: 100px;}```2. vertical-align 属性vertical-align 属性用于垂直对齐表格单元格中的内容。

它可以设置为 top、middle、bottom 或 baseline，分别代表顶部对齐、居中对齐、底部对齐和基线对齐。

例如：```td {vertical-align: middle;}```3. flexbox 布局flexbox 布局也可以用于垂直对齐。

好看css 文字

好看css 文字在CSS中，你可以使用各种属性来改变文本的外观。

以下是一些常见的CSS属性，你可以使用它们来美化你的文字：1. 字体样式：使用`font-style`属性，你可以设置文本为斜体。

例如：```cssp {font-style: italic;}```2. 字体大小：使用`font-size`属性，你可以设置文本的大小。

例如：```cssp {font-size: 16px;}```3. 字体颜色：使用`color`属性，你可以设置文本的颜色。

例如：```cssp {color: red;}```4. 字体权重：使用`font-weight`属性，你可以设置文本的粗细。

例如：```cssp {font-weight: bold;}```5. 字体家族：使用`font-family`属性，你可以设置文本的字体。

例如：```cssp {font-family: Arial, sans-serif;}```6. 文本对齐：使用`text-align`属性，你可以设置文本的对齐方式。

例如：```cssp {text-align: center;}```7. 文本装饰：使用`text-decoration`属性，你可以添加装饰线到文本上，例如删除线或下划线。

例如：```cssp {text-decoration: line-through; / 删除线 /}```8. 文本转换：使用`text-transform`属性，你可以改变文本的大小写。

例如：```cssp {text-transform: uppercase; / 大写 /}```9. 行高：使用`line-height`属性，你可以设置文本的行高。

例如：```cssp {line-height: ; / 倍的字体大小 /}```10. 文字间距：使用`letter-spacing`属性，你可以设置字母之间的间距。

例如：```cssp {letter-spacing: 2px; / 2像素的间距 / }```。

深入理解 CSS 中的行高与基线

深入理解CSS 中的行高与基线1、基本概念1. 基线、底线、顶线、中线注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。

2. 内容区内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。

内容区的大小依据font-size的值和字数进行变化。

3. 行距、行高行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。

一般情况下，也可以认为是相邻文本行基线间的距离。

行距：指相邻文本行间上一个文本行基线和下一文本行顶线之间的距离。

当然，我更愿意认为是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。

4. 行内框行内框是一个浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。

5. 行框行框（line box），同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。

行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。

Vertical-align:垂直居中上一节我们讲解了行高与单行纯文字的垂直居中（line-height），而如果行内含有图片和文字，在浏览器渲染出来后，读者可以发现文字和图片在垂直方向并不是沿中线居中，而是沿基线对齐。

这是因为，元素默认的垂直对齐方式为基线对齐（vertical-align: baseline）。

CSS3实现文本垂直排列的方法

CSS3实现⽂本垂直排列的⽅法最近的⼀个项⽬中要使⽂字垂直排列，也就是运⽤了CSS的writing-mode属性。

writing-mode最初时ie中⽀持的⼀个属性，后来在CSS3中增添了这⼀新的属性，所以在ie中和其他浏览器中的语法会有区别。

1.0 CSS3标准writing-mode:horizontal-tb;//默认：⽔平⽅向，从上到下writing-mode:vertical-rl; //垂直⽅向，从右向左writing-mode:vertical-lr; //垂直⽅向，从左向右demo<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS⽂字垂直排列</title><style type="text/css">div{border: 1px solid lightblue;padding: 5px;}.vertical-text{-webkit-writing-mode: vertical-rl;writing-mode: vertical-rl;}</style></head><body><div class="vertical-text">1. ⽂字垂直排列 <br />2. ⽂字垂直排列</div></body></html>2.0 IE中由于历史的原因，IE下该属性值则显得尤为复杂：-ms-writing-mode: lr-tb | rl-tb | tb-rl | bt-rl | tb-lr | bt-lr | lr-bt | rl-bt | lr | rl | tb具体可以查看官⽅⽂档：3.0 ⼀些应⽤3.1 垂直居中通过对这个属性的使⽤，我们可以结合 text-align:center 实现垂直居中或者使⽤margin: auto。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

line-height行高属性的使用技巧CSS中的line-hight属性是用来控制文本行之间的空隙的。

它一般情况下没有单位的设定（如：line-height:1.4;）所以这是一个按字体尺寸的比例来计算。

这对印刷版来说是一个很重要的属性。

线条过低就会挤在一起，线条过高就会相距甚远，这两种情况都会降低可读性。

不过你可能已经知道了这一点。

本文中，我们将把注意力放在一些设计上。

如果你知道（或可以计算出）的line-height的精确值，你可以做一些奇妙的东西！每行文本设置不同颜色很遗憾这里没有::nth-line(),我们直接使用<span>是不可靠的,因为会有很多不同的事情导致文本在不同的地方被打乱。

尽管是非标准的，但这里还有一种用法就是使用一个元素的背景作为文字的背景。

C/C++ Code.text {-webkit-background-clip: text;-webkit-text-fill-color: transparent;}而这里还有另一个绝招，你可以用linear-gradient()来让颜色排列在一起就不会褪变成另一个颜色。

它只是会突然的结束然后开始另一个。

比方说我们知道line-height是22px，我们可以制作一个像这样的阶梯色。

CSS Code.text {background-image: linear-gradient(to bottombottom,#9588DD,#9588DD 22px,#DD88C8 22px,#DD88C8 44px,#D3DD88 44px,#D3DD88 66px,#88B0DD 66px,#88B0DD);}结合着两种技巧在不支持文本背景剪裁的浏览器里，比如Firefox,你会得到一个文本后面的实心背景颜色块。

也许这很酷你会喜欢它。

但也可能你只是想要得到那样的文本颜色。

在这种情况下，你可以使用@support去单独的支持它。

此外，当你需要在各处使用line-height，把他设置成变量或许会更好。

我将在这里使用SCSS，或许有一天在CSS中也可以使用变量。

所以改变之后，他依旧被渲染，看起来它一直保持工作。

CSS Code$lh: 1.4em;body {font-size: 1em;line-height: $lh;}@supports (-webkit-background-clip: text) {p {-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,#9588DD,#9588DD $lh,#DD88C8 $lh,#DD88C8 $lh*2,#D3DD88 $lh*2,#D3DD88 $lh*3,#88B0DD $lh*3,#88B0DD);}}在元素的顶部使用这种方式是最容易的。

下面是一个例子，重点是前几行被改变。

CSS Code.text {-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,rgba(white, 0.8),rgba(white, 0.8) $lh,rgba(white, 0.6) $lh,rgba(white, 0.6) $lh*2,rgba(white, 0.4) $lh*2,rgba(white, 0.4) $lh*3,rgba(white, 0.2) $lh*3,rgba(white, 0.2));}如果我们试图在任意数量的文本上对最后几行进行定位，这将变得更加困难。

在这种情况下，我们需要让第一个颜色带从顶部开始向下渐变。

幸运的是我们可以用calc()做到这一点。

CSS Code.text {-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-image: linear-gradient(to bottombottom,rgba(white, 0.8),rgba(white, 0.8) calc(100% - 66px),rgba(white, 0.6) calc(100% - 66px),rgba(white, 0.6) calc(100% - 44px),rgba(white, 0.4) calc(100% - 44px),rgba(white, 0.4) calc(100% - 22px),rgba(white, 0.2) calc(100% - 22px),rgba(white, 0.2));background-position: bottombottom center;}还有其他方法也可以做到这样的效果，比如覆盖伪元素梯度（用pointer-events:none;所以它并不恼人）。

文字之间的行线使用一个和我们上面使用的相类似的solid-color-stops的技术，我们可以建立一个1px的线在已知的line-height上重复。

最简单的方法是使用repeating-linear-gradient()来确保其他元素可以正常使用（比如说padding也是基于line-height的）。

CSS Code.parent {padding: $lh*2;background: #082838;background-image: repeating-linear-gradient(to bottombottom,rgba(white, 0) 0,rgba(white, 0) $lh/1em*16px-1,rgba(white, 0.1) $lh/1em*16px-1,rgba(white, 0.1) $lh/1em*16px);}为了得到用1px的线，我们需要知道line-height的像素值是多少，然后用这个值在减去1px。

我们的目标是正好在line-height的高度上进行梯度的重复，来让这个空间的最后一个像素是一条线。

因为我们已经不是body字体大小的1em,而是16px了。

而且line-height的设置用的是em的单位。

所以我们可以通过1em划分要删除的单元，然后复制成16px并在需要的时候减1.每一行图片的位置如果你知道精确地line-height，你还可以做的另一家事情是用background-size在纵轴上去匹配它。

然后你把他垂直重复，他将会在每一行有一个图片的队列。

CSS Code.textbackground-image: url(image.svg);background-size: $lh $lh;background-repeat: repeat-y;padding-left: $lh*2;}line-height 属性的继承问题曾出现这样一个问题：CSS Code<style type="text/css">p {line-height:17px;}</style><div class="mdse-detail"><p><strong style="font-size:30px"> 品牌：XZX<br />市场价：145元<br />颜色：黑色<br />面料：棉<br />尺码：S M L<br />衣长：S 89 M 90 L 91<br />肩宽：S 35 M 36 L 37<br />胸围：S 88 M 92 L 96<br />下摆：S 104 M 108 L 112<br />袖长：S 17 M 17.5 L18<br />由于测量方法不同，误差在2CM左右！</strong></p></div>你会发现上面例子的文字会重叠在一起！这是什么原因呢？由于.detail-content 中的p 元素继承了默认设置的全局样式line-height:17px，而自定义区块又是由商家自定义，其内字体被设置为了font-size:30px;（可能为任意值），根据Inline formatting model，得知该文字的line-box 高为17px，多出的字体部分上下溢出，所以会出现字体重叠的现象。

那这个问题如何解决呢？解决方案：我们给 .mdse-detail 下的p 元素设定样式属性line-height:1.4。

为什么解决方案里的 1.4 不带单位？元素的line-height 属性值会继承父元素（或祖先元素）的line-height 属性值，如果属性值有单位，则继承的值是换算后具体的px 值而非原始的值（比如：em、%），而如果属性值没有单位，则浏览器会继承数值（无单位），然后根据该元素的font-size 值重新解析得到新的line-height 值。

这个和table 的tr 设置display 属性有一点点类似（tr.style.display = ”;，IE 显示block，而Firefox 等标准浏览器显示table-row）。

还有另外一个相对低效的方法，但也不失为一个快捷的解决方案：CSS Code.mdse-detail p * {line-height:140%;}。