关于 margin padding的一点感想

最新推荐文章于 2023-02-16 16:56:00 发布
原创 最新推荐文章于 2023-02-16 16:56:00 发布 · 106 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文探讨了在网页布局中块级元素与内联元素的区别。重点介绍了padding与margin属性仅在块级元素上生效的特点，并解释了不同display属性值如inline、inline-block和block对这些样式的影响。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

padding 与margin 只有在标签为快状时才会起作用 display inline不起作用  display inline-block 和block可以

CHOUFENGDDDDDD
关注
css项目5:学成网首页制作（div+css）一个大页面！！！
小黄呀呀呀的博客
04-30 1011
1、index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学成网首页</title> <link rel="stylesheet" href="style.css"> </head> &lt...
前端技术学习路径的一点感想
麻子、你高了博客
09-20 2487
前端技术学习路径的一点感想 前言 之前不经意看到这篇文章，那么就整理之后给大家分享一下，本文主要说明前端学习的过程和路径。 路漫漫其修远兮，吾将上下而求索~~ 正文 明确你的意愿 其实不管是前端还是后端，首先要清楚，自己是想从事业务型的技术工作，还是 Research 型的技术工作。 前者可以理解为：互联网公司的程序员。业务型的前端工程师，最大
个人学到前端基础一点思路感想
weixin_44031526的博客
11-25 124
页面布局整体思路 1.确定页面的版心（可视区） 2.分析页面中的行模块，及模块中的列模块 3.一行中的列模块经常浮动布局，先确定每个列的大小，之后确定列的位置 4.制作html结构，先有结构，后有样式 5.理清布局结构 CSS属性书写顺序 1.布局定位属性：display（建议第一个）/position/float/clear/visibility/overflew 2.自身属性：width/height/margin/padding/border/background 3.文本属性：color/font/
关于看了SpringBoot快速入门的感想
qq_52870771的博客
02-06 207
任务要求 最终任务： 1、做出来一个可以前后端交互的登录功能（账号和密码写死在Java代码中即可） 交付物： 1、至少一篇过程或者心得博客； 2、最终结果截图发到群里。 交付时间： 2021.02.06 将账号和密码写死在Java代码中，实现登录功能，已完成。 登录控制器：package main.demo; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.P
2017年终技术感想
qq_38524997的博客
01-30 252
临近春节之际，我来讲讲我在前端职位刚满半年多，从运营转岗到前端，从一无所知的小白到现在能够独立负责整个项目的学习过程以及我的心路历程，仅做个人的工作总结记录，各位看客们不喜勿喷~    目前为止，前端也就三门语言：HTML、CSS、JS；得益于我大学时期的学习，我在转岗之前就有的基础是： 1. 熟悉掌握HTML（主要是各种标签） 2. 熟悉掌握CSS---盒模型：margin、padding
2019.9.17 工作感想
Mr_SongJiang的博客
09-18 160
昨天晚上忘记写日记了，只能今天早上来补，昨天一开始老师给我们复习了上节课所学的内容——选择器的优先级，然后列举了一些列子： A. img.thumb:after 0012 　B.[data-job=“frontend”]::first-letter 0011 C. #main::before 0101　　 D. [type=“checkbox”]:checked 0020 　 E....
关于页面开发的一些感想
热门推荐
08-10 1万+
一开始编写CSS代码时，对body和每个元素的定义是很有必要的，个人喜欢以下定义 body{ text-align:center; vertical-align:middle; background:#fff; font-family:Verdana, Geneva, sans
关于完成“博雅首页”作业后的感想
aollerjlx1234的博客
08-01 431
　　经过一周多的时间，我们完成了HTML和CSS的学习，铭哥给我们留了一道作业，就是完成一个博雅首页的网页，铭哥说让我们用我们现在所学到的所有知识，尽自己的努力去完成他，经过3天的时间，通过与同学们的讨论和查阅资料终于完成了自己的第一张网页，看到自己努力的成果还是感到非常欣慰，也鉴定了自己继续学习的信念。 　　下面就是我完成过程的完整代码，大概我自己也看不懂了：D，大神们多指点指点。 ...
css项目做完以后的感想,编写CSS的一些感悟分享
weixin_36193690的博客
08-03 342
我都是拿别人的模板，模仿者编写DIV布局，以及CSS样式。一般而言，我都是用ID来标整个页面的布局结构，然后里面的内容用CSS类来设置样式。比如我布局可以这么写，然后我可以写一些小工具(也可以这么想，反正就是一个HTML模块，然后你可以在里面填写相应的结构化信息，交给程序员编写相应的 代码或者是JS脚本，复用之)：复制代码代码如下:Knight's Personal SiteHomeAbout U...
关于近段时间Android学习的一些感想
u010072474的专栏
01-21 179
很久没有写博客了，也算应胡哥的要求，更多的是对最这段时间自己的学习和生活的一个回顾和总结吧，无关技术。 想想自己这段时间，特别是最近这几天，确实是有点过于放松了。感觉总是不在状态，好像慢慢地没有了刚来公司时那种冲劲，那么的毅然决然。胡哥的这次博客要求，也算给自己提了个醒吧。不管怎么样，坚持下去，才有机会，不能刚刚有点起步，就开始松懈，我确实该要醒悟。就像乌拉多恩的歌曲《鸟人》里写...
聊聊数学建模的这段经历及一些感想
AwakeFantasy的博客
02-16 1081
一些我的数学建模经历与一些感想
期末HTML作业，反思与思考！
小小程序猿
06-13 4238
最近期末，学校事情有点多，然而我有点缓不过气来，这其实也是我自己的原因，故事要从一年前说起。 那是一个炎热的夏季，每年六月都有异常的不安和烦躁，跟不要说那即将高考的学子来说了，我不是一个归人，我只是过客。 青春对于长得不错的人来说是一场，美妙的旅程，对于我来说，不过是一场迷迷糊糊的梦吧了，如果有怀恋的话，那就是那年的懵懵懂懂的“友谊”，经此而已。 下面就是我这渣渣的代码，有兴趣的谢谢观看。 <!doctype html> <html> <head> <meta ch
html总结(呕心沥血版)
qq_51986661的博客
08-25 724
html总结,语义化标签、h5新增标签、表格、表单、列表。html面试题精选
一、HTML+CSS基础知识学习笔记
每日编程
05-23 6005
注：如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向，一定要有一个擅长的能够用来吃饭的，其他的能掌握多少就是多少，像我这样的什么都学，什么都不知道没什么卵用的。 1.HTML：Hyper Text Markup Language(超文本标记语言.) 文本:就是一个文件，包含一部分的文本内容. 标记语言：标记语言都是由标签组成. 一般情况下，标签分为开始和结束
rocksdbjni-9.10.0.jar中文文档.zip
07-31
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
Python推箱子小游戏源代码
07-31
Python推箱子小游戏源代码，专为大学课程设计和期末大作业开发，可作为高分课程设计参考，含代码注释，便于理解，代码完整可直接运行。资源来源于网络分享，仅用于学习交流使用，请勿用于商业，如有侵权请联系我删除！
AB-LOGIX5000程序：欧洲风格包装机全中文注释版解析及其应用 - 运动控制 详解
07-31
AB-LOGIX5000程序在欧洲风格包装机中的应用，重点讲解了16轴光纤总线运动控制、装料位置定位排布算法以及富士白光触摸屏程序的设计特点。文中强调了程序的模块化设计思想，如利用AOI将伺服轴参数打包成可复用模块，采用Modulo运算进行高效的空间节省排布算法，以及详细的中文注释和报警信息分级处理。此外，还分享了一些实际调试过程中遇到的问题及解决方案，如光纤环网节点的terminator电阻未激活导致的总线超时问题。 适用人群：从事工业自动化领域的工程师和技术人员，尤其是那些希望提高程序模块化设计能力的人群。 使用场景及目标：适用于需要理解和改进复杂工业控制系统的技术人员。目标是帮助读者掌握高效的运动控制算法、空间节省的排布方法以及良好的程序注释习惯，从而提升系统的稳定性和易维护性。 其他说明：文章不仅提供了技术细节，还分享了许多实用经验和教训，如不要轻易修改带有经验公式的代码部分，这些内容对于实际工作中遇到类似问题有很好的指导意义。
电音助手新版.exe 下载-电音助手排行-电音助手推荐-爱山歌下载 电音助手 - 官方网站
最新发布
07-31
电音助手官方下载电音助手开发迷笛声卡官网华龙电音基调网华龙电音基调网电音基调查询器官网调音师工具箱官网下载安装电音助手电脑版下载电音助手lite下载电音助手官网主播电音
langchain4j-workers-ai-0.34.0.jar中文文档.zip
07-31
1、压缩文件中包含： 中文文档、jar包下载地址、Maven依赖、Gradle依赖、源代码下载地址。 2、使用方法： 解压最外层zip，再解压其中的zip包，双击 【index.html】 文件，即可用浏览器打开、进行查看。 3、特殊说明： （1）本文档为人性化翻译，精心制作，请放心使用； （2）只翻译了该翻译的内容，如：注释、说明、描述、用法讲解 等； （3）不该翻译的内容保持原样，如：类名、方法名、包名、类型、关键字、代码 等。 4、温馨提示： （1）为了防止解压后路径太长导致浏览器无法打开，推荐在解压时选择“解压到当前文件夹”（放心，自带文件夹，文件不会散落一地）； （2）有时，一套Java组件会有多个jar，所以在下载前，请仔细阅读本篇描述，以确保这就是你需要的文件。 5、本文件关键字： jar中文文档.zip,java,jar包,Maven,第三方jar包,组件,开源组件,第三方组件,Gradle,中文API文档,手册,开发手册,使用手册,参考手册。
margin padding
03-03
### CSS Margin 和 Padding 的用法及区别 #### 定义与作用范围 Margin和Padding均用于控制元素间的间距，但其应用位置不同。Margin定义了元素与其他外部元素之间的距离[^1]；而Padding则设定了元素内部内容与其边界之间的空间大小[^2]。 #### 设置方式及其特性 对于两者而言，皆可通过四个方向分别设定数值来调整布局效果： - **单值声明**：应用于四面相同的情况； ```css div { margin: 10px; padding: 20px; } ``` - **双值声明**：第一个值代表上下边缘，第二个值表示左右两侧； ```css p { margin: 1em .5em; padding: 8px 16px; } ``` - **三值声明**：依次对应上、水平（即左/右）、下的顺序； ```css span { margin: 7px 9px 11px; padding: 3px 6px 9px; } ``` - **四值声明**：按照顺时针方向——顶、右侧、底端以及左侧逐一赋值。 ```css article { margin: 4px 8px 12px 16px; padding: 2px 4px 6px 8px; } ``` 值得注意的是，在某些情况下，如未正确处理浮动等问题时，可能会遇到意想不到的行为，例如子元素顶部外边距塌陷现象[^5]。 #### 特殊情况说明 除了常规的长度单位之外，还可以采用百分比形式指定尺寸，此时百分比基于父容器宽度计算得出。另外，“auto”作为特殊的取值选项可用于让浏览器自动决定合适的内外边距量度，常被用来实现居中对齐等功能[^3]。 #### 实际案例展示 考虑如下HTML结构片段： ```html <div class="container"> <p>一段文字。</p> </div> ``` 配合相应的样式表可以直观感受两者的差异： ```css .container { border: solid black 1px; } p { background-color: lightgray; } /* 应用不同的margin和padding */ .margin-example p { margin: 20px; } .padding-example p { padding: 20px; } ``` 通过上述例子可以看出，`margin`使得段落四周出现了额外的空间，并且这些空间位于`.container`盒子模型之外；相反地，设置了`padding`之后，则是在保持原有矩形轮廓不变的前提下增加了内侧填充区域。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值