a标签在设置行内元素和块元素的区别,为什么这是行内块元素底下会多出1px

a标签在设置行内元素和块元素的区别,为什么这是行内块元素底下会多出1px

老师你好,在li中用a标签包括文字,然后为了对a标签设置宽高,使其转换为块元素,但是我认为转换为行内块也可以设置宽高,当我转换为行内块的时候,首页底部会多1px像素,当我换位转换为块元素的时候,就没有这样的问题,这是什么原因呢?

a标签转为行内块

http://img1.sycdn.imooc.com//climg/5fff0cfd09fd64cb06840505.jpg

http://img1.sycdn.imooc.com//climg/5fff0d1d098c2ef830000822.jpg

a标签转为块元素

http://img1.sycdn.imooc.com//climg/5fff0d58095a697b06610410.jpg

http://img1.sycdn.imooc.com//climg/5fff0d85094a5a6130000822.jpg



我的代码文件图:

http://img1.sycdn.imooc.com//climg/5fff0dc009fe89fd14421160.jpg

http://img1.sycdn.imooc.com//climg/5fff0dd9096f823709641283.jpg

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

同学你好,问题解答如下:

1、并不是其它的li没有空隙,是都有空隙的。深绿色是给li加的,第一个li多出的部分和其它li空白的部分是一样大的

http://img1.sycdn.imooc.com//climg/6001482509147b2018290818.jpg

2、如果给第二个li也加上颜色,也是会多出1px左右的,没有加颜色的是多出一个空隙,空隙是a的,但是a在li里面,给li加上背景颜色就把空隙盖住了,就看着好像没有了空隙,实际上还是有的

http://img1.sycdn.imooc.com//climg/6001484a09cf9cbe17860852.jpg

3、如图,如果把深绿色加给a的话,就正常显示了如下图:

http://img1.sycdn.imooc.com//climg/6001486a091e101118080804.jpg

​祝学习愉快!

好帮手慕张 2021-01-14 14:26:56

同学你好,行内块元素具有行内元素的特性,行内元素有默认的间隙,所以设置为行内块以后,也会有默认的间隙,这是一个特性,特殊记住即可。(解决默认间隙就可以把行内元素或者行内块元素转换为块元素)

祝学习愉快!

  • 提问者 Mr丨大西瓜 #1

    如果是因为行内块间隙的问题,那我是所有a标签统一设置为行内块,应该其他几个都会有多出来1px的,为什么单单只有第一个“首页”会多出来?请老师解答一下,是否还有其他方法解决,如果我非要用行内块的话。

    2021-01-14 14:31:42
  • 提问者 Mr丨大西瓜 #2

    而且我的行内a标签元素是被li包裹住的,这个间隙是在HTML里面的哪个地方产生的

    2021-01-14 14:33:42
  • 好帮手慕张 回复 提问者 Mr丨大西瓜 #3

    同学你好,请同学把全部代码粘贴上来(不要截图),以便老师准确高效的定位问题。

    祝学习愉快!

    2021-01-14 17:47:55
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师