html中的空白字符问题
2024-10-11 01:27:15
1、当我们想使用百分比来进行两个盒子的并排
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
html,
body {
margin: 0;
padding: 0;
} .container {
width: 1024px;
height: 2000px;
margin: 0 auto;
} .container > div {
display: inline-block;
} .left {
width: 80%;
height: 100%;
background-color: #ff0;
} .right {
width: 20%;
height: 100%;
background-color: #00f;
}
</style>
</head> <body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
当我们想通过inline-block让两个div来并排,一个战父盒子的80%,一个占20%。可能看起来刚好100%,但是会由于代码中左右两个盒子之间的空白字符会导致右边的盒子掉下来。
2、解决办法
(1)消除空白字符
让左右两个盒子的代码紧密连起来,就是不要让他们中间有空白字符
(2)给父盒子添加属性font-size:0;来消除空白字符
3、字母间距和单词间距
字母间距——letter-spacing
单词间距——word-spacing
最新文章
- 1.2 - C#语言习惯 - 用运行时常量readonly而不是编译期常量const
- iOS-------应用性能调优的25个建议和技巧
- jquery-validation 使用
- 转-利用Oracle审计功能来监测试环境的变化
- Nobel Lecture, December 12, 1929 Thermionic phenomena and the laws which govern them
- Oracle ABP(Autotask Background Process)
- linux下登陆mysql失败
- SoapUI:使用Excel进行参数化
- SpringMVC详解(一)------入门实例
- 如何在yarn上运行Hello World(二)
- ELK日志检索并邮件微信通知
- 防反编译的加壳工具-Virbox Protector
- debain 安装nodejs
- spring boot + vue + element-ui全栈开发入门——spring boot后端开发
- 用python处理html代码的转义与还原
- 物体检测,Error: maximum box coordinate value is too large
- Kubernetes学习
- 初探 objc_msgSend函数
- utf16编码格式
- C++ 类 复制构造函数 The Copy Constructor