HTML空白字符占位问题

最新推荐文章于 2024-01-03 20:18:18 发布

zihanzy.com

最新推荐文章于 2024-01-03 20:18:18 发布

阅读量3.2k

点赞数

分类专栏： html5&css3 文章标签： html5 css3

本文链接：https://blog.csdn.net/weixin_45143481/article/details/104346591

版权

html5&css3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

如下例
我们想实现这样一种效果
父盒子包含两个子元素，这两个子元素分别平分父元素的宽度
但我们要使两个元素显示在同一行，所以设置其display:'inline-block',如下代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.container{
			width:1000px;
			height:500px;
			background: skyblue;
		}
		.left,.right{
			width:500px;
			height:500px;
			background: orange;
			display: inline-block;
		}
		.right{
	       background: red;
	   }
	</style>
</head>
<body>
<div class='container'>
	<div class='left'></div>
	<div class='right'></div>
</div>
</body>
</html>

我们预期的结果是这样
在这里插入图片描述
浏览器显示结果

两个子元素并没有显示在同一行，但我们的代码也没有问题，平分宽度，设置行内块属性。问题出在哪里？
这就是典型的HTML空白字符占位的问题，虽然我们设置了平分宽度，但我们在编辑器里面的换行使得两子元素之间多了一个空白字符，也就是我们少算了一个空白字符的宽度。
解决办法
1.删除换行

<div class='container'>
	<div class='left'></div>
	<div class='right'></div>
</div>//空白字符占位

<div class='container'>
	<div class='left'></div><div class='right'></div>
</div>//正常显示

2.父元素设置font-size:0

.container{
			width:1000px;
			height:500px;
			background: skyblue;
			font-size: 0;
		}

zihanzy.com

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML空白字符占位问题

如下例我们想实现这样一种效果父盒子包含两个子元素，这两个子元素分别平分父元素的宽度但我们要使两个元素显示在同一行，所以设置其display:'inline-block',如下代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title>...
复制链接

扫一扫