html中的换行符也占空间，如何解决

我会带着你远行 2022-08-22 06:15 322阅读 0赞

![这里写图片描述][20160526095929652]  
如上图：parent的width：600px;  
child1和child2的width：300，display:inline-block;  
我们希望它们并排显示，但为什么会换行呢？

<html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
        <link rel="stylesheet" href="transoform.css">
    </head>
    
    <body>
     <div class="parent">
       <div class="child1">1</div>   
       <div class="child2">2</div>
      </div>
    </body>
    
    </html>

.parent{ width:600px; border: solid; /* font-size:0; */ }
    .child1{ width:300px; height: 300px; display:inline-block; /* font-size:20px; */ line-height: 300px; text-align: center; background:#ccc; }
    .child2{ width:300px; height: 300px; display:inline-block; /* font-size:20px; */ line-height: 300px; text-align: center; background: rgba(230, 32, 32, 0.51); }

因为在html中，parent中间有换行空格等等，其实这些也是占据空间的；

如何解决？  
① 在parent中添加font-size：0；这样parent内的空格换行就不占空间了；但有个问题，会发现child的文字也没有了，由于font-size默认是继承的；  
② 所以第二部就是设置child的font-size;  
![修改后如图][20160526100619053]

[20160526095929652]: /images/20220722/6cd53d20a2834d6981adb971dca763d8.png
[20160526100619053]: /images/20220722/d78b002cd3f949b483b0b9c3d5ab14c3.png

发表评论取消回复

表情：

评论列表（有 0 条评论，322人围观）

还没有评论，来说两句吧...

相关阅读

相关 docker容器日志占满硬盘空间的解决方案

目录原因分析解决方案方案一定时清空日志文件方案二全局容器日志大小方案三修改日志驱动 docker

秒速五厘米/ 2024年03月17日 13:59/ 0 赞/ 134 阅读

相关 Linux 磁盘空间占满故障解决方法

故障排查：使用命令查看磁盘使用量使用人类可读的格式(预设值是不加这个选项的...) df -h --inodes 列出 inode

水深无声/ 2023年05月29日 06:25/ 0 赞/ 481 阅读

相关 js字符串中换行符不起作用如何解决

有时候需要在字符串中使文字换行，但是换行符 \\n 不起作用，这时候在他的HTML元素上，给他的css设置 white-space:pre-line; 这样在字符串中再加入换行

柔情只为你懂/ 2023年01月23日 05:54/ 0 赞/ 91 阅读

相关 groovy linux 换行符,jenkins - sed用换行符替换为Groovy Jenkinsfile中的空间 - 堆栈内存溢出...

我们需要在Jenkinsfile中执行以下操作，并且可以直接在服务器上正常运行： Server: echo $myval | sed 's/,/\\n/g' | grep a

迈不过友情╰/ 2022年10月20日 13:48/ 0 赞/ 275 阅读

相关 docker - 占满根目录空间的解决方案

> Docker 默认会占用根目录的空间，时间久了就会吧根目录占满，本文记录解决方案。问题复现 > 不知不觉根目录已经没有空间，`ls` 的补全都会报错。

爱被打了一巴掌/ 2022年09月07日 00:08/ 0 赞/ 306 阅读

相关 html中的换行符也占空间，如何解决

![这里写图片描述][20160526095929652] 如上图：parent的width：600px; child1和child2的width：300，displa

我会带着你远行/ 2022年08月22日 06:15/ 0 赞/ 323 阅读

相关如何在HTML页面中保留空格和换行符

我们知道，在浏览器对HTML页面进行渲染显示的时候，会对HTML文件中的空格和换行符进行处理，这样我们原来写在HTML文件中的格式化就可能起不到效果，尤其是在我们想展示结构化程

忘是亡心i/ 2022年08月21日 11:58/ 0 赞/ 324 阅读

相关 C++中的类所占内存空间总结

类所占内存的大小是由成员变量（静态变量除外）决定的，成员函数（这是笼统的说，后面会细说）是不计算在内的。摘抄部分：成员函数还是以一般的函数一样的存在。a.fun

梦里梦外;/ 2022年08月21日 00:10/ 0 赞/ 288 阅读

相关在html中js如何给字符串中加换行符

参考：[https://www.cnblogs.com/hspl/p/10832103.html][https_www.cnblogs.com_hspl_p_10832103.

桃扇骨/ 2021年08月29日 12:31/ 0 赞/ 653 阅读

相关解决Oracle临时表空间占满的问题

正常来说，在完成`Select`语句、`create index`等一些使用`TEMP`表空间的排序操作后，`Oracle`是会自动释放掉临时段的。但有些有侯我们则会遇到临时段

浅浅的花香味﹌/ 2021年06月26日 16:06/ 0 赞/ 1231 阅读