行内块元素上下错位问题

最新推荐文章于 2024-06-28 23:37:34 发布

qq_39913441

最新推荐文章于 2024-06-28 23:37:34 发布

阅读量3.8k

点赞数 1

文章标签：行内块上下错位问题

本文链接：https://blog.csdn.net/qq_39913441/article/details/95941168

版权

本文探讨了行内块元素上下错位的原因，主要归因于浏览器默认的vertical-align属性值。通过设置CSS的vertical-align属性、使用浮动或者转换元素为块级元素，可以有效解决这个问题。示例中详细展示了对img和input元素应用vertical-align属性后的效果。

摘要由CSDN通过智能技术生成

行内块元素上下错位问题

行内块上下错位的原因：

不同的标签，浏览器默认的对齐方式（vertical-align:baseline）不同，
比如图片默认顶对齐，文字默认底对齐。

所以当文字旁边搭配图片时，发现图片比文字靠上，原来默认的情况是图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

解决方法：

添加vertical-align属性；
添加浮动float
将行内块元素改成块级元素，这样vertical-align对块级元素无效

vertical-align 属性设置元素的垂直对齐方式。

代码片.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>行内块元素上下错位问题</title>
		<style type="text/css">
			div{
    
				display:inline-block;
			}
			.div1{
    
				width: 200px;
				height: 300px;
				/* 为了方便观察，设置颜色 */
				background: red;
				/*vertical-align: bottom;*/
			}
			.div2{