资讯专栏INFORMATION COLUMN

html+css面试题 行内元素padding和margin

liangzai_cool / 1616人阅读

看到一个面试题 关于行内元素span的

    

    1
    2

我当时就笑了还有这种题? 送分的?

我想的结果:

实际结果:

我擦! 啪啪啪打脸!

为什么padding-top被无视了?
提出这个疑问后我又被打脸了!

    

    1
    2
    
3


其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢?
查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响!

我擦 不可替换元素 老子干了不到十年前端没听过啊?

是的官方英文文档和高程上都有说过

span、a属于不可替换元素
input属于可替换元素

padding、margin针对不可替换元素 padding-top、padding-bottom和margin-top、margin-bottom无效。。。无效。。。

哈哈 总结一下多读书是有用的!

您的点赞是我继续下去的动力,谢谢!

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53515.html

相关文章

  • html+css面试 行内元素paddingmargin

    看到一个面试题 关于行内元素span的 * { padding: 0; margin: 0; } span { padding: 100px; border: 1px solid red; } ...

    HtmlCssJs 评论0 收藏0
  • 前端面试-行内元素块级元素

    摘要:二块级元素块级元素占据其父元素容器的整个空间,因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下,行内元素不会以新行开始,而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...

    int64 评论0 收藏0
  • 前端面试-行内元素块级元素

    摘要:二块级元素块级元素占据其父元素容器的整个空间,因此创建了一个块。而块级元素可以包含行内元素和其他块级元素。格式默认情况下,行内元素不会以新行开始,而块级元素会新起一行。 一、行内元素 一个行内元素只占据它对应标签的边框所包含的空间。 二、块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个块。通常浏览器会在块级元素前后另起一个新行。 三、行内元素示例 HTML showIm...

    cucumber 评论0 收藏0
  • 2018面试总结(一)

    摘要:面试题总结现将我整理的一些前端笔试题分享一下,希望对大家有所帮助。中常见行内元素和块级元素有哪些行内元素块级元素行内块元素常见的有的和有什么区别和的值为时,都会使显示出来的文本框不能输入文字,不能更改更改表单域中的内容。 2018面试题总结 现将我整理的一些前端笔试题分享一下,希望对大家有所帮助。 html中常见行内元素和块级元素有哪些?行内元素:a,b,strong,span,im...

    邱勇 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<