位置:主页 > 互联网技术 >

css中vertical-align和line-height的用法,verticalalign用法

作者:凯发K时间:2019-01-09

css中vertical-align和line-height的用法,verticalalign用法
css中vertical-align和line-height的用法 1、先来看一种现象:

  (1)、将一个图片放入一个div块中,div块背景颜色设置为aquamarine。将会发现图片与div块下边沿有一定间隙。

      实例:

         

      代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } div{ backgroAAA-color: aquamarine; } img { width: 300px; } </style> </head> <body> <div> <img src="./131796750659172.jpg" />

      实例:放大之后可以很明显的看出来!

      

      代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } div{ background-color: aquamarine; } img{ width: 300px; } span{ background-color: azure; } </style> </head> <body> <div> <img src="./131796750659172.jpg" />

    完整代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } div{ background-color: aquamarine; /*line-height: 5px;*/ /*font-size: 0;*/ } img{ width: 300px; /*display: block;*/ vertical-align: bottom; } span{ background-color: azure; } </style> </head> <body> <div> <img src="./131796750659172.jpg" />

    代码如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } div{ background-color: aquamarine; line-height: 500px; font-size: 0px; } img{ width: 300px; vertical-align: middle; } span{ background-color: azure; } </style> </head> <body> <div> <img src="./131796750659172.jpg" alt="picture"> <span>xxxxx!</span> </div> </body> </html> View Code

    本文出处:http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

http://www.bkjia.com/HTML_CSS/1144948.htmlwww.bkjia.comtruehttp://www.bkjia.com/HTML_CSS/1144948.htmlTechArticlecss中vertical-align和line-height的用法,verticalalign用法 css中vertical-align和line-height的用法 1、先来看一种现象: (1)、将一个图片放入一个div块...

本文源自: 凯发娱乐

上一篇:html 5的localstorag,htmllocalstorag

下一篇:没有了

互联网技术

联系我们