html+css面试题 行内元素padding和margin
看到一个面试题 关于行内元素span的
<style>* {padding: 0;margin: 0;}span {padding: 100px;border: 1px solid red;}</style>
<body><span>1</span><span>2</span>
</body>我当时就笑了还有这种题？ 送分的？
我想的结果：
实际结果：
我擦！ 啪啪啪打脸！
为什么padding-top被无视了？
提出这个疑问后我又被打脸了！
<style>* {padding: 0;margin: 0;}span {padding: 100px;border: 1px solid red;}div{border: 1px solid red;}</style>
<body><span>1</span><span>2</span><div>3</div>
</body>
其实span是不支持padding-top、padding-bottom,不过奇怪的是既然padding不支持那为什么边框显示是有padding-bottom呢？
查了好多文章 结果只得到了一句话 行内不可替换元素padding会对边框产生影响！
我擦 不可替换元素 老子干了不到十年前端没听过啊？
是的官方英文文档和高程上都有说过
span、a属于不可替换元素
input属于可替换元素
padding、margin针对不可替换元素 padding-top、padding-bottom和margin-top、margin-bottom无效。。。无效。。。
哈哈 总结一下多读书是有用的！
您的点赞是我继续下去的动力，谢谢！
html+css面试题 行内元素padding和margin相关推荐
- html行内元素转为块级元素,前端面试题-行内元素和块级元素
一.行内元素 一个行内元素只占据它对应标签的边框所包含的空间. 二.块级元素 块级元素占据其父元素(容器)的整个空间,因此创建了一个"块".通常浏览器会在块级元素前后另起一个新行. ...
- html块中的内容垂直居中,css如何设置行内元素与块级元素的内容垂直居中
首先我们先了解一下行内元素和块级元素 行内元素(内联元素):没有自己的独立空间,它是依附于其他块级元素存在的,空间大小依附于内容多少.行内元素没有度.宽度.内外边距等属性. 块级元素:占据独立的空间, ...
- CSS入门基础----行内元素、块级元素和行内块元素的特点和转换
块级元素 常见的块元素有<h1>~<h6>.<p>.<div>.<ul>.<ol>.<li>等,其中<div& ...
- css块级元素变行内元素,css块级元素和行内元素
块级元素: 1.display为block 2.会独占一行,导致换行 3.可以设置宽高 4.margin外边距设置都有效 5.padding内填充都有效 6.可以容纳行内元素和块级元素,也可以容纳内联 ...
- 陈力：传智播客古代 珍宝币 泡泡龙游戏开发第九讲：块元素、行内元素、标准流、盒子模型
陈力:传智播客古代 珍宝币 泡泡龙游戏开发第九讲:块元素.行内元素.标准流.盒子模型 DIV+CSS将显示和数据分离,极大的方便了贵阳网站建设时布局的灵活性.将节对DIV+CSS中类选择器.id选择器 ...
- html 块内元素 下移,html——行内元素、块元素、行内块元素
行内元素:span ,a, ,strong , em, del, ins.特点:在一行上显示:不能直接设置宽高:元素的宽和高就是内容撑开的宽高. 块元素:div,h1-h6,p,ul,li.特 ...
- inline行内元素
行内元素可以设置 padding-left padding-right margin-left margin-right,可以将其和与之一行的元素挤开一定的距离,一般我们认为行内元素不能设置margi ...
- HTML行内元素和块级元素
1 常见的行内元素和块级元素 特点 注意 块级元素 div h1~h6 p ul ol li 比较霸道:自己独占一行 高度,宽度.外边距以及内边距都可以控制 宽度默认是容器(父级宽度)的100% ...
- [css] 行内元素可以设置padding和margin吗？
[css] 行内元素可以设置padding和margin吗? 行内元素的纵向padding和margin都是不考虑的,这是css规范定义的. inline元素确实可以设置垂直方向的 padding 和 ...
最新文章
- 添加css的方式：link与@import区别
- php执行rsync,使用rsync工具构建php项目管理平台，rsync项目管理
- 【错误记录】Flutter 报错 ( Could not resolve io.flutter:flutter_embedding_debug:1.0.0. )
- 5分钟教你制作狂拽酷炫的投资交易图
- POJ-2186 Popular Cows (Tarjan缩点) 文末有测试数据
- Luogu P3953 逛公园
- python线程任务run_Python线程类| 带有示例的run（）方法
- 基于vue2.0 + elementUI 后台管理平台
- 畅通工程（最小生成树模板）
- 汽车在转型！福特中国的架构实践
- 仍然提供32位Linux发行版,Ubuntu 20.04彻底淘汰32位映像，只提供64位映像下载
- 一个不错微服务架构图
- STC89C52引脚图
- 吃货在东京 -- 记那段吃不饱的日子 之一 牛头自助烤肉店
- web前端开发期末大作业 ——个人主页（可自取源码）
- 教室预约APP系统（基于uni-app框架）毕业设计毕业论文开题报告参考（1）系统功能
- 本周XR新闻:吴德周成立AR硬件公司,SideQuest支持PICO、Magic Leap
- win10高危服务_Win10启用不了Windows Defender Antivirus Service服务如何解决
- 【IDEA】使用@slf4j 运行时提示找不到符号log
- linux备份软件rear,linux系统 备份与还原