当前位置: 首页 > news >正文

CSS核心笔记002

margin塌陷问题

第一个子元素的上margin会作用在父元素上,
最后一个子元素的下margin会作用在父元素上

解决

1. 给父元素设置 不为0的pandding 
2. 给父元素设置宽度不为0 的border
3. 给父元素设置样式 overflow:hidden

margin合并问题

兄弟元素的下外margin和会下面兄弟的上外margin会取一个最大值而不是合并计算

解决

布局上下兄弟元素,设置一个上下外边距即可

元素之间空白问题

行内 行内块 之间距离会解析成为一个空格

解决

给父元素设置 font-size:0,即可.在给元素单独设置样式

行内块 行内元素

被父元素当成文本处理.可以设置 文本的 居中对齐效果等
比如 text-align 、 line-height 、 text-indent 

行内块幽灵空白问题

原因

行内块元素与文本的基线对齐,而文本的基线与文本最底端之间是有一定距离的。

解决

方案一: 给行行内块设置 vertical ,值不为 baseline 即可,设置为 middel 、 bottom 、
top 均可。方案二: 若父元素中只有一张图片,设置图片为 display:block 。方案三: 给父元素设置 font-size: 0 。如果该行内块内部还有文本,则需单独设置 fontsize 。

相关文章:

  • 【Vue宏函数的演进:从Vue 2到Vue 3的概念重塑与优化】
  • AI融合SEO关键词实战指南
  • 名胜古迹传承与保护系统(springboot+ssm+vue+mysql)含运行文档
  • 【Java学习笔记】进制与进制转换
  • 如何避免被目标网站识别为爬虫?
  • [MySQL数据库] InnoDB存储引擎(三): 内存结构详解
  • 2025能源网络安全大赛CTF --- Crypto wp
  • maptalks在地图中进行矩形绘制,并把绘制区域截图下载
  • uniapp自定义底部导航栏,解决下拉时候顶部空白的问题
  • 决策卫生问题:考公考编考研能补救高考选取职业的错误吗
  • JavaScript 对象复制:浅拷贝与深拷贝
  • DBA工作常见问题整理
  • Vue 3 reactive 和 ref 区别及 失去响应性问题
  • Chromium 134 编译指南 macOS篇:获取源代码(四)
  • LeetCode hot 100—括号生成
  • Hyperf (Swoole)的多进程 + 单线程协程、Gin (Go)Go的单进程 + 多 goroutine 解说
  • 深入剖析 ORM:原理、优缺点、场景及多语言框架示例
  • 消除异步的传染性(代数效应)
  • ARINC818-1协议
  • 网易游戏 x Apache Doris:湖仓一体架构演进之路
  • 海南医科大披露校内竞聘上岗结果:32名干部离开领导岗位,8人系落选
  • 达恩当选罗马尼亚总统
  • 贯彻落实《生态环境保护督察工作条例》,充分发挥生态环境保护督察利剑作用
  • 菲律宾选举委员会公布中期选举结果,马科斯阵营选情未达预期
  • 下辖各区密集“联手”,南京在下一盘什么样的棋?
  • 一个留美学生的思想转向——裘毓麐的《游美闻见录》及其他