图片/文字间隙去除方法(html)

首先我们需要了解

对于元素格式的转换各自都有各自不同的使用方法已经理论知识；透彻弄懂才能思路清晰去解决问题
三种元素格式：inline（行元素）/block（块元素）/inline-block(行级块元素) ;

• block

1. 1. block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
   2. block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
   3. block元素可以设置margin和padding属性。

• inline

1. 1. inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
   2. inline元素设置width,height属性无效。
   3. inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。

• inline-block

1. 1. 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性。

如果要改变以上标签这一特性，可以在css中定义display去随意改动元素模式进行相关设置。

解决多图在一行或多标签文段在一行解析：

但是在行级元素的标签中应用定位（position）/浮动(float)那么标签会自动改为inline-block;
行级元素都具有文本特性，当两个行级元素处于一行时，如果在他们之间加空格，那么也会跟正常文本一样分隔开；

解决文字搭配图片在一行解析：
行级元素或者行级块元素，如果一个是图片一个是文字，那么底对齐；

如果标签包含图片和文字那么是文字底对齐，如果都是文字（哪怕字号不一样），是底对齐；如果不喜欢底对齐可以使用（vertical-align）调整对齐方法

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	使元素及其后代元素的底部与整行的底部对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	将元素升高或降低指定的高度，可以是负数。
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

去掉网页中图片间隔：
图片之间有空格的原因：凡是带有inline的元素/标签，都有文字特性（文字之间总有空隙）；几个img在一块，中间总有空隙；因为img是inline-block;
 方法一：因为具有文本属性，将需要去除空隙的图片放在一行，源码中间不能存在间隔

eg: <img src="logo.jpg"> <img src="logo.jpg">

图片间的间隙就会自然去除；

 方法二：通过css样式：margin-left 改变成负数，那么图片之间会嵌入进去，从而达到去掉空隙的目的；（这种方法也可以运用到盒子与盒子中但是若存在边框，边框重叠部分会加深，就需要去除边框利用其他属性在这解释表单重叠加深去除方法）

扩展：在表单中当我们添加了边框，又把每个单元格的边距去除后，表单就会出现边框重叠的问题，使得边框线变粗，这时我们就可以设置border-collapse: collapse来设置边框，它把重叠的边框合并在一起，成为一个边框，实现单线边框的效果。