图片、表单有间距怎么解决?请看这里

图片有间距怎么办?input与其它元素有间距怎么办?这篇文章让你完美解决图片距离、元素距离


首先我们写入一些图片,效果如下


示意图

可以看到图片产生的四周的边距问题


当我们想让input和button按钮并排显示:


input button

表单彼此也有空隙

或者是写了一些链接标签:

a标签

同样的也有空隙,虽然不影响什么,竟还有一点好看~

让我们来会想一下这些都是什么标签呢?答案是行内标签

块级元素包含内联元素如图片文字等时,内联元素默认是和父级元素的baseline(基线)对齐的,而baseline又和父级元素底边有一定的距离(这个距离和font有关,不一定是5px),所以以上代码的效果中不同div之间有间隙,这是因为图片与父元素的底边有距离。

我能想到的解决方法如下:

1.将代码并排显示(不建议使用):

方法1

2.将换行的空隙注释掉:

方法2

3、于是设置img的vertical-align属性为bottom或者top

以上三种方法解决了产生的左右间隙问题,效果如下:


图片间隙



a标签间隙

4、给该元素加上line-height:5px;

这种方法消除了上下间隙


5、空格产生间隙,所以给父盒子加上属性font-size:0px;

注意,这个方法会影响盒子中文字的大小,需要给文字另设大小

6、给img加上display:block;并给img 浮动float:left;

最后两种方法结果如图:


图片等行内元素问题产生间隙问题看似不大,却实实在在的影响我们的排版布局,希望通过本文给你带来收获!如有不足请指出,让我们一起学习~

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,547评论 0 6
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,687评论 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,135评论 1 45
  • CSS 是什么 css(Cascading Style Sheets),层叠样式表,选择器{属性:值;属性:值}h...
    崔敏嫣阅读 5,353评论 0 5
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 9,809评论 0 0