html--空格--英文单词分割符

﹏ヽ暗。殇╰゛Y 2022-12-23 11:12 233阅读 0赞

## **一些关于空格的小笔记** ##

1.  众所周知，在编写html文件时，无论你在编辑器中敲多少个空格和回车，在浏览器中都只有一个。要展示多个空格可以用 &nbsp; 替换(解决方法不唯一)
2.  首先看一个div内文本是中文和英文的区别  
    先看代码：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]  
    两个样式一样的div，由于文本中英文的不同，效果也不同  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]  
    如果div内文本是中文的，并且超过一行，默认是会换行的; **而如果是英文且内容超过一行, 默认是不会换行的。**  
    而这时在英文文本中**插入空格或回车**，**空格就能起到英文单词分割符的作用**  
    ![在这里插入图片描述][20201124190818585.png_pic_center]  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]
3.  连续图片的间隙原由  
    当图片连续排列时，图片之间会出现间隙。  
    比如：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 3]  
    ![在这里插入图片描述][2020112419275871.png_pic_center]  
    可以看到图片间有空格，这是因为**凡是带有inline的元素, 都有文字特性，有文字特性，就会被空格分割。而img是inline-block，所以图片之间会有间隙(一般是4px)**

解决办法：  
1.html编写时去掉img元素之间的空格或回车(缺点: 可读性变差)

![在这里插入图片描述][20201124193225294.png_pic_center]  
2.设置margin-left属性（缺点: 只在本地上解决了，如果网页被压缩效果就会不一致了）

img{ 
    	magrin-left: -4px;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/3d77dc494d04484690b01344bd7515a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201124190034929.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center
[20201124190818585.png_pic_center]: https://img-blog.csdnimg.cn/20201124190818585.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 2]: https://img-blog.csdnimg.cn/20201124190831516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ_size_16_color_FFFFFF_t_70_pic_center 3]: https://img-blog.csdnimg.cn/2020112419274282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU4MDEzOQ==,size_16,color_FFFFFF,t_70#pic_center
[2020112419275871.png_pic_center]: https://img-blog.csdnimg.cn/2020112419275871.png#pic_center
[20201124193225294.png_pic_center]: https://img-blog.csdnimg.cn/20201124193225294.png#pic_center