我的编程空间,编程开发者的网络收藏夹
学习永远不晚

如何理解ol和ul的padding和margin默认值

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

如何理解ol和ul的padding和margin默认值

本篇内容主要讲解“如何理解ol和ul的padding和margin默认值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何理解ol和ul的padding和margin默认值”吧!

在《CSS Mastery》一书的第5章中,作者说IE和Opera使用margin-left来缩进列表,而Safari和Firefox使用padding-left。经过我的实际测试,发现Opera 9(我实测的是Opera 9.23)同FF和Safari一样,也是使用padding-left的。更精确的说,它们的默认样式应该是:

ol, ul { padding-left:40px; }

而IE的默认样式是:

ol, ul { margin-left:30pt; }

Opera 8或者以前的版本是否和IE一样?有兴趣的同志可以自行测试。

但这至少说明一点,除了微软之外的浏览器厂商都达成一致意见,list的缩进应该使用padding来控制。其实这很好理解,缩进的是每一个item而不是整个的list。设计者对list有怎样的期望呢?比如说设置了ul的background:green,多数人应会期待整个ul(即包括了padding的部分)都使用绿色背景色,而不会希望在list的左侧缺失30pt(通常等于40px)。其次,marker部分(就是item之前的小圆点或者数字序号部分)是在li之外的,但从逻辑上说它属于list的一部分,在list之内。而IE使用margin,实际上就导致了marker部分是悬于list之外。实际上,如果list获得了layout(hasLayout),你就发现marker不见了!因为在IE臭名昭著的layout模型里,hasLayout之后,元素对象会自行处理其所占据区域的呈现,但是无法处理其区域之外。这也是其的width/height实际上类似min-width/min-height的原因,因为它无法绘制overflow到外面的部分。

CSS Code复制内容到剪贴板

  1. <style>   

  2. ol { background:green; }   

  3. ol#myList2 { zoom:1; }   

  4. </style>   

  5.   

  6. <ol id="myList1">   

  7.     <li>First item...</li>   

  8.     <li>Second item...</li>   

  9.     <li>Third item...</li>   

  10. </ol>   

  11.   

  12. <ol id="myList2">   

  13.     <li>First item...</li>   

  14.     <li>Second item...</li>   

  15.     <li>Third item...</li>   

  16. </ol>  


所以,比较好的方法就是给所有网页统一list的margin和padding,比如:
ol, ul { margin-left:0; padding-left:40px; }

或者也可以只针对IE进行修复:

ol, ul { _margin-left:0; _padding-left:40px; }

到此,相信大家对“如何理解ol和ul的padding和margin默认值”有了更深的了解,不妨来实际操作一番吧!这里是编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

如何理解ol和ul的padding和margin默认值

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

常用元素默认margin和padding值的示例分析

这篇文章主要为大家展示了“常用元素默认margin和padding值的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“常用元素默认margin和padding值的示例分析”这篇文章吧。代码
2023-06-08

如何理解Java8接口中的默认方法和静态方法

本篇内容介绍了“如何理解Java8接口中的默认方法和静态方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!1.接口中的默认方法和静态方法Ja
2023-06-25

如何解决idea中默认equals和hashcode引起的bug

小编给大家分享一下如何解决idea中默认equals和hashcode引起的bug,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!idea默认带的equals和ha
2023-06-20

PHP 函数的参数传递方式如何处理可选参数和默认参数?

参数传递方式:按值传递(基本类型)和按引用传递(复合类型)。可选参数:允许指定参数值,但不是必需的。默认参数:允许指定可选参数的默认值。实战:通过示例函数展示如何使用可选和默认参数计算矩形面积。PHP 函数的参数传递方式在 PHP 中,函
PHP 函数的参数传递方式如何处理可选参数和默认参数?
2024-04-15

如何解决PHP开发中的安全认证和权限管理

随着互联网的发展,Web应用程序的安全性变得越来越重要。在PHP开发中,安全认证和权限管理是必不可少的。本文将介绍如何解决PHP开发中的安全认证和权限管理,并提供具体的代码示例。一、安全认证(Authentication)安全认证是验证用户
2023-10-21

在Go语言中如何解决并发网络请求的请求认证和授权处理问题?

在Go语言中如何解决并发网络请求的请求认证和授权处理问题?随着互联网的高速发展,网络请求在我们的日常开发中扮演着非常重要的角色。然而,随着系统规模的扩大和并发量的增加,请求认证和授权问题也逐渐变得复杂起来。在这篇文章中,我们将探讨在Go语言
2023-10-22

编程热搜

目录