ul左边padding-inline-start: 40px；多出宽度和高度

最新推荐文章于 2026-06-20 12:04:54 发布
原创 最新推荐文章于 2026-06-20 12:04:54 发布 · 1k 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了一种解决UL元素内边距不为零的问题，通过在样式表中为UL元素的class设置padding-inline-start属性值为0，可以有效地消除内边距，实现预期的显示效果。

这个问题困扰了好久，这里做一统计。

可以给ul的元素 class 样式中直接设置padding-inline-start: 0;  即可。

 

 

[CSS] padding-left, margin-left，left以及padding-inline-start 的区别
以爱护甲,爱满枫林。
04-15 5978
padding-left, margin-left，left以及padding-inline-start都能在一定的情况下起到令元素由左向右位移的效果(靠左距离)。 在这里padding-left（内边距）和margin-left （外边距）可以直接从console里的box model反映出。给左内边距padding-left 30像素，左外边距margin-left 20像素 - 如下图所示 ...
-webkit-padding-start: 40px;ul的padding-left:40px;问题
12-26 5599
今天在仿本站搭一个SSM博客的时候，在写 HTML/CSS 的时候，遇到一个问题。 如图，左边有 40px 的空隙 然后审查元素，查看一下，真相出来了。md，竟然是浏览器的原因。 解决办法，添加一行 * {    padding：0；    margin：0；} 但是，这个貌似比较占资源，我们可以换用下面这段代码 body, div, dl,
关于ul中出现默认的margin和padding值及解决办法
qq_45794542的博客
07-06 8396
在浏览器中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; */ }
css 导航栏效果
蓝朽的小世界
04-08 9116
html实现导航栏效果
CSS构建About Me区域：box-sizing、float与column-count实战
weixin_33913332的博客
06-20 286
网页中的'About Me'区域是建立用户信任的第一触点，其本质是信息架构与视觉排版的协同工程。核心原理在于控制元素尺寸稳定性、实现图文环绕布局、优化长文本可读性——这正是box-sizing解决边界计算、float提供原生环绕能力、column-count提升阅读节奏的技术价值所在。广泛应用于个人博客、作品集网站、自由职业者主页等需要高效传递专业人设的场景。本文聚焦HTML语义结构与CSS基础属性的深度协同，不依赖Flexbox或Grid，回归扎实、兼容、可维护的工程实践。
纯CSS构建高性能语义化Header实战指南
最新发布
weixin_33827731的博客
06-20 380
Header是网页首屏体验的核心载体，其加载性能、布局逻辑与语义结构直接影响跳出率、可访问性及SEO效果。本文围绕CSS文本对齐原理展开，深入解析Flex布局中justify-content与align-items的作用域差异，破除‘vertical-align万能’‘margin调位置’等常见误区；强调HTML语义化（如<header><nav>）对无障碍支持、自动化测试和长期维护的技术价值；结合clamp()流体缩放、gap间距控制、max-height响应式动画等现代CSS方案，提供零JavaScri
【css3】li点击增加背景色填充父级宽度（占整行）
深耕 WebGIS 前端 / 数字孪生三维可视化✨
03-03 1700
【css3】li点击增加背景色填充父级宽度（占整行） 这篇文章起源于写代码时遇到的一个小坑，在使用 ul li 有序列表时，点击某一行显示高亮时，只会在li标签范围内添加背景色，如下图所示： 而我期望的效果，是这样的： 于是我经过了一番摸索，发现了如下情况： 1. ...
关于<ul></ul>标签 -webkit-padding-start: 40px;兼容性问题
kakamonster的博客
05-17 2337
这是ul部分CSS代码：.nav ul{ list-style-type:none; width:200px; height:30px; }css代码部分没有任何问题这是html代码： &lt;div class="nav"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/li&gt; &lt;li&gt;博客&lt;/li&amp
css 之 padding
小白向前冲！
02-02 2655
【1】padding 与 元素的尺寸   ——对块级元素    （1） 当width 为非 auto 时，padding 会影响元素尺寸    （2） 当width 为 auto 或box-sizing 为 border-box 时,padding 不会影响元素尺寸 ——对内联元素   （1） 水平 padding 影响尺寸，垂直 padding 不影响尺寸，但会影响背景占
如何使用 CSS 自定义无序列表样式
fe_watermelon的博客
05-20 5355
大家好，我是前端西瓜哥。前段时间实现了个自定义无序列表样式，踩了一些坑，和大家说说。设计师说我们这个，列表项样式要优化一下，太丑了，这个原点要大一点。默认的无序列表样式是这样的。<style>   ul {     width: 200px;     border: 1px solid #555;     f
前端的一些小总结
Jeuneke的博客
12-18 576
由于做开发或多或少会碰到一些前端的问题，我在这里总结下，我第一次遇到的那些小问题。 字符串拼接的问题 作为一个新手开发，我相信很多人都会遇到字符串的拼接问题，无论什么开发语言，都有这个问题。所以接下来，我来分享下我的字符串拼接经验。 给大家举一些例子： <!DOCTYPE html> <html> <head> <meta c...
CSS布局系列一：标准、浮动、定位
betty_grant的博客
12-10 1233
标准 浮动 设置浮动 float none：默认值，表示元素不进行浮动 left：表示元素浮动，并其所在的块容器左侧 right：表示元素浮动，并其所在的块容器右侧 inline-start：表示元素浮动，并其所在的块容器开始一侧 inline-end：表示元素浮动，并其所在的块容器结束一侧 清除浮动 clear none：默认值，表示元素不会清除之前的浮动。 left：表示元素被向下移动，用于清除之前的左浮动 right：表示元素被向下移动，用于清除之前的右浮动。 both：
html5默认样式
每天进步一点点
11-16 784
<!--Hide elements--> [hidden], area, base, basefont, datalist, head, link, meta, noembed, noframes, param, rp, script, source, style, template, track, title { display: none; } embed[hidden] { display: inline; height: 0; width: 0; } input[type=h.
为什么你应该停止使用"传统"的margin和padding来设置CSS样式
粉丝们务必加入微信粉丝群
08-16 577
随着使用网络的人比以往任何时候都多，确保网络体验对所有用户都可访问的需求变得更加迫切。这包括从从不同方向/角度（（从右到左，从上到下等）。当添加传统的 margin 和 padding 时，你明确地定义了来自各个方向（上、下、左和右）的边距和填充。这可能会在你的区域设置中创建一个看起来不错的布局，但当使用不同区域设置的用户以与你设计的方式不同的 方向/角度 和查看内容时，可能会感到困惑。每个现代开...
css 去掉ul和li的默认样式，并自定义新的布局样式，多行多列。
热门推荐
PrimaryColor
12-11 1万+
效果图： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
ul左边有40px的边距
qust_gosuccess的博客
08-12 1181
感谢https://zhidao.baidu.com/question/199133186.html的分享 在没有看到上述文章时，我的页面ul左边总有一段间距，明明将宽度设为100%了，还是存在间距，如下图： 原来是因为 不同的浏览器有不同的默认样式，这样就导致了，明明没有设置间距，但仍存在间距的情况。 解决方法是在css 的最前面加上： *{          padding:0; ...
CSS：<ul>的左边为什么有40px的默认距离呢？
microcosmv的博客
06-14 1万+
由于不同浏览器之间有不同的默认样式，这样就导致了：“明明我没有设置margin padding，但是元素之间却存在间距等状况”。解决这种情况的方法就是在开始写css之前将所有元素的padding margin默认样式统一起来。在css文档中添加如下样式即可：*{ padding:0; margin:0; }以下是学习过程中遇到的问题实例例1<!DOCTYPE html PUBLIC
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值