ul、li默认margin、padding深入研究

最新推荐文章于 2024-07-12 16:27:40 发布
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量1.3k 收藏 1
点赞数
文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ling1990822/article/details/84118547
版权

废话不多说先上代码和最终效果图。

代码：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ul\li默认margin\padding测试</title>
<style>
	html{overflow:auto}
	body{font:12px Arial, Helvetica, sans-serif;background:#FFF}
	body,h1,h2,h3,h4,h5,h6,p{margin:0;}
	ul{margin-top:0;margin-bottom:0;padding-left:0;*margin-left:0;}
	li{list-style:none}
	.u_a li{background:url(images/li_dot.gif) no-repeat;padding-left:15px;line-height:25px;_width:95%;font-size:14px;overflow:hidden; white-space:nowrap;text-overflow:ellipsis;}
	.u_a li a{color:#333; text-decoration:none}
	.u_a li a:hover{color:#333; text-decoration:underline}
	.d_a{width:450px;margin:50px auto 0;border
最低0.47元/天 解锁文章
SeaHorse
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
关于ol和ul的padding和margin默认值
09-25
这些列表元素在不同的浏览器中可能有不同的默认样式，尤其是涉及到`padding`和`margin`属性。`padding`是元素内部边距，而`margin`是元素与周围元素之间的空白区域。 在《CSS Mastery》一书中提到，Internet ...
UL标签的padding与margin默认值 40px
looksun
12-24 1万+
UL标签的padding与margin默认值 ul标签在FF中默认只有padding值(即：padding-left:40px),而在IE中只默认有margin值（即：margin-left:40px）,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题。 一般都在总样式规定一下：body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6
关于list（ol和ul）的padding和margin
hax的技术部落格
09-02 448
在《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; } ...
关于ul中出现默认的margin和padding值及解决办法
qq_45794542的博客
07-06 7283
在浏览器中ul会有默认的margin和padding值 <style> .top { width: 500px; height: 400px; border: solid black 1px; } .top li { width: 50px; height: 30px; border: black solid 1px; /* float: left; */ }
ul与li应用样式及其兼容性
weixin_30651273的博客
08-17 131
<ul> <li>list item one</li> <li>list item two</li> <li>list item three</li> <li>list item four</li></ul> list-s...
chrome中ul的padding-left: 40px
lamanchas的博客
11-14 508
ul的padding-left：40px使用 * {margin:0; padding:0;} ，或者用这个body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, table, th, td {margin:
ul左侧有padding值，导致会超出
POJIE19820106的博客
05-29 239
ul左侧有padding值，导致会超出，在通配符设置内外边距为0，即可，例：*{padding:0;margin:0;}。 转载于:https://www.cnblogs.com/Lily-L/p/6917177.html
css控制UL LI 的样式详解(推荐)
09-25
本文将深入讲解如何使用CSS来控制`<ul>`和`<li>`的样式。 首先，`<ul>`标签用于创建一个无序列表，每个列表项由`<li>`标签包裹。在默认情况下，浏览器会为`<ul>`添加圆形的项目符号，而`<li>`则会有一定的内缩进。...
CSS实现ul和li横向排列的两种方法
11-21
在网页布局设计中，我们经常需要将`<ul>`列表中的`<li>`元素横向排列，以便创建导航栏或其他水平展示的内容。本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一：使用`float:left` 首先，...
css ul li 的使用及浏览器兼容问题
09-25
首先，`ul`元素在默认情况下，IE会给其一个外边距`margin`，而FF则设定内边距`padding`。这会导致在添加背景或边框时，`ul`元素在不同浏览器中的展示效果不同。例如，IE的项目符号位于`ul`元素外部，因此`ul`的宽度...
ul的li样式
06-12
本篇文章将深入探讨如何利用CSS来调整`<ul>`和`<li>`的样式，以及它们在选项卡式设计中的应用。 首先，`<ul>`元素用来创建一个无序的项目列表，每个列表项则由`<li>`元素定义。默认情况下，浏览器会为`<ul>`添加一...
去掉ul li 前面的点与空白
热门推荐
雾隐雾现的至渝博客
04-20 3万+
背景         用了很多次，就当做个笔记，有时候发现在css开头写上 * { padding: 0; margin: 0; }         目的是能达到，但是有些情况下我又有点想保留 html 自带的一些样式，所以还是都搞搞 去掉圆点 ul li { list-style: none; } 去掉空白   &n
HTML元素的默认CSS设置介绍
全技术调调
12-07 781
html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre { display: block } li { display: list-item }
HTML上的ul li标签消除,去掉ul li 前面的点与空白（div+css）
weixin_28685287的博客
06-03 2万+
如果直接在网页用 ul li 标签，默认情况下有一个小黑点，并且每个li前面还有一段空白，尤其是li中包括图片的情况。为什么会出现这种情况？ul li 是 html 中的列表标签，所以默认每个li前面都有一个小黑点。而每个li前面空白与 padding 和 margin 有关，padding 是内间距，margin 外边距。仅用文字说明不太形象，下面将分别举例说明去掉 ul li前面的点的方法和列...
解决html中ol ul li的默认往左偏移的样式问题
程序员老狼专注开发aigc或客服系统应用
03-26 976
在HTML中，有序列表(ol)和无序列表(ul)元素通常会默认有一定的内边距(padding)和外边距(margin)，这是由浏览器默认样式表所定义的。这些内边距和外边距可能导致列表向左偏移，从而出现左边超出的情况。 具体来说，ol和ul元素的默认样式表通常会定义： padding-left：列表项左侧的内边距，默认为 40px(不同浏览器可能略有不同)。 margin-left：列表元素左侧...
html ul li 展开 缩进,html – CSS设置li缩进
weixin_42298254的博客
06-03 2104
缩进一个ul下拉菜单，使用/* Main Level */ul{margin-left:10px;}/* Second Level */ul ul{margin-left:15px;}/* Third Level */ul ul ul{margin-left:20px;}/* and so on... */您可以缩进lis和(如果适用)as(或任何内容元素)，每个都有不同的效果。您还可以使用填充左...
CSS中margin和padding的区别(1)
YaoXTao的专栏
04-23 1269
本文导读：padding margin都是边距的含义，关键问题得明白是什么相对什么的边距．padding是控件的内容相对控件的边缘的边距．margin是控件边缘相对父空间的边距．       在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。在CSS中padding是指自身边框到自身内部另一个容器边框之间的距离，就是容器内距离。       下面讲解 padd
更新商品前端接口编写
最新发布
weixin_55639995的博客
07-12 345
那么在vue运行的时候,会加载所有的ref属性特征的元素还有组件。标签中ref的作用就是将 该组件注册到vue对象的ref属性中。使用插槽,那个scope就是代表着一行的数据。然后里面的选项遍历的是 js定义的数据。如果文字显示过多可以使用 文本隐藏显示。表单绑定还有表单数据的绑定。数据绑定使用的表单绑定状态。写form表单然后封装数据。状态的选择使用的是选择框。副标题使用的是文本域。状态页面使用,下拉框。富文本选择器使用组件。使用后端枚举类型去写。
清除全局ul和li的默认装饰
06-06
上述代码中，我们将 ul 和 li 的 margin 和 padding 设置为 0，将它们的 list-style 设置为 none。这样就可以清除它们的默认装饰了。 需要注意的是，这种做法会将所有的 ul 和 li 元素的样式都清除掉，包括我们自己...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值