元素和元素之间间隙的产生和解决方法 |
您所在的位置：网站首页 › html删除p元素 › 元素和元素之间间隙的产生和解决方法 |
|
一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第16天，点击查看活动详情 我正在参加 码上掘金体验活动，详情：show出你的创意代码块 我们在编写网页的时候， 为了增加代码的可读性和可维护性，我们时常会在代码的适当位置添加上对应的空格和换行 而这些空格和换行经过浏览器的解析后，会被识别为空格 Document span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; } item1 item2 item3掘金代码片段 这些由于空格所导致的元素和元素之间的间隙被称之为元素之间的间距，而这些间距往往不是我们所需要的，更多的时候我们为了更方便的对网页进行布局或者更好的进行页面的兼容性处理，我们时常会希望可以移除这些间距， 移除空格和换行既然元素间之间的间距出现的原因就是标签段之间的空格和换行，因此，去掉HTML中的空格，自然间距就没有了。 但是这种方式会极大程度的减低代码的可读性和可维护性， 所以不推荐在生产环境中使用这种方式来清除元素和元素之间的间距 我们可以在生产环境的时候，使用这样方式来清除间距（很多类似于vite，webpack之类的打包工具，在打包生产环境代码的时候，会自动移除不必要的空格和换行） Document span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; } item1item2item3 使用margin负值margin为正值的时候，元素会往右移动，而设置为负值的时候，元素会往左进行移动 我们可以使用这种方式来清除元素和元素之间的间距 但是这种方式我们需要根据实际情况去设置margin的值，不够通用 Document span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; } body :not(span:nth-child(1)) { margin-left: -5px; } item1 item2 item3掘金代码片段 font-size: 0对于行内级或行内块级元素，元素于元素之间的间隙的大小约是1个字符的大小 所以可以通过设置父元素的font-size属性的值为0，来将这个字符的大小变为0，从而移除元素和元素之间的间隙 但是因为font-size是一个继承属性，所以我们需要多次在子元素中对字体大小进行重置 Document body { /* 通过在父元素设置font-size的值为0来清除间距 */ font-size: 0; } span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; /* 因为font-size是继承属性，所以需要在子元素进行重置 */ font-size: 16px; } item1 item2 item3掘金代码片段 word-spacing我们可以使用word-spacing来设置单词和单词之间的间距 使用这种方式我们依旧需要自己去调整word-spacing的值，不够通用 Document body { /* 通过设置父元素的word-spacing来调整子元素之间的间距 */ word-spacing: -5px; } span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; } item1 item2 item3掘金代码片段 letter-spacingletter-spacing用来设置字符和字符之间的间距 Document .container { /* 在父元素中，将字符间距减少, 从而使单词字符之间的间距变得紧凑 */ letter-spacing: -5px; } span { display: inline-block; background-color: rgba(0, 0, 0, 0.4); padding: 5px; /* 在子元素中，需要将字符之间的间距进行重置 如果不重置，因为letter-spacing是一个文本相关的继承属性 所以此时单词之间的字符会挤在一起, 因此需要进行重置 */ letter-spacing: 0; } item1 item2 item3掘金代码片段 float因为浮动元素之间不能层叠，所以浮动元素具有如下特点: 如果一个元素浮动，另一个浮动元素已经在那个位置了，后浮动的元素将紧贴着前一个浮动元素 如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足的空间为止 Document span { background-color: rgba(0, 0, 0, 0.4); padding: 5px; /* 利用浮动元素的特性来清除元素之间的间距 */ float: left; } item1 item2 item3掘金代码片段 flex我们可以使用flex布局的 justify-content: flex-start;来清除元素和元素之间的间距 而开启flex布局后，justify-content的默认值就是flex-start，所以这行代码一般可以省略 Document .container { display: flex; } span { background-color: rgba(0, 0, 0, 0.4); padding: 5px; } item1 item2 item3掘金代码片段 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |