Table of Contents
前面的话
line-height
定义
作用
font-size
vertical-align
inline-block底部空隙
Home Web Front-end HTML Tutorial 深入理解line-height、font-size、vertical-align_html/css_WEB-ITnose

深入理解line-height、font-size、vertical-align_html/css_WEB-ITnose

Jun 24, 2016 am 11:26 AM

目录 [1]行高 [2]字体大小 [3]垂直对齐

前面的话

  line-height、font-size、vertical-align这三个属性可谓是相互依赖的关系,改变行间距离、设置垂直对齐等都需要这三个属性的通力合作。本文涉及到的一些术语详细解释请参考块级元素基本术语和行内元素基本术语

 

line-height

定义

  line-height行高是指文本行基线之间的距离。在应用到块级元素时,line-height定义了元素中文本基线之间的最小距离;在应用到行内元素时,line-height定义了元素行内框的高度

  值: | | | normal | inherit

  初始值: normal

  应用于: 所有元素

  继承性: 有

  百分数: 相对于元素的字体大小font-size

作用

  行高line-height会显著影响行内元素如何显示。行高line-height实际上只影响行内元素和其他行内内容,而不会直接影响块级元素,也可以为一个块级元素设置line-height,但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度

 

font-size

  font-size字体大小设置的是字体中字符em框的高度,实际的字符字形通常比字符em框要矮

  值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | | | inherit

  初始值: medium

  应用于: 所有元素

  继承性: 有

  百分数: 相对于父元素的字体大小font-size

 

vertical-align

  vertical-align用来设置垂直对齐方式,所有垂直对齐的元素都会影响行高

  值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit

  初始值: baseline

  应用于: 行内元素、替换元素、表单元格

  继承性: 无

  百分数: 相对于元素的行高line-height

  [注意]vertical-align不影响块级元素中内容的对齐

vertical-align:baseline(元素的基线与父元素的基线对齐)vertical-align:sub(降低元素的基线到父元素合适的下标位置)vertical-align:super(升高元素的基线到父元素合适的上标位置)vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)vertical-align:inherit(从父元素继承vertical-align属性的值)
Copy after login

inline-block底部空隙

  inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐);而匿名文本是有行高的,所以X的底边距离行框有一段距离,这段距离就是图像留出的空隙

  于是,解决这个问题有以下几个解决办法

  [1]display:block

  因为垂直对齐方式只能作用于替换元素和行内元素,更改为块级元素,会使垂直对齐方式失效

  [2]父级的line-height: 0

  这样使匿名文本与行框的距离为0

  [3]vertical-align: top/middle/bottom

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Is HTML easy to learn for beginners? Is HTML easy to learn for beginners? Apr 07, 2025 am 12:11 AM

HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.

What is the purpose of the <progress> element? What is the purpose of the <progress> element? Mar 21, 2025 pm 12:34 PM

The article discusses the HTML &lt;progress&gt; element, its purpose, styling, and differences from the &lt;meter&gt; element. The main focus is on using &lt;progress&gt; for task completion and &lt;meter&gt; for stati

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

What is the purpose of the <datalist> element? What is the purpose of the <datalist> element? Mar 21, 2025 pm 12:33 PM

The article discusses the HTML &lt;datalist&gt; element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <meter> element? What is the purpose of the <meter> element? Mar 21, 2025 pm 12:35 PM

The article discusses the HTML &lt;meter&gt; element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates &lt;meter&gt; from &lt;progress&gt; and ex

What is an example of a starting tag in HTML? What is an example of a starting tag in HTML? Apr 06, 2025 am 12:04 AM

AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors? Apr 04, 2025 pm 11:54 PM

GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...

See all articles