height 用 padding, width 用 margin

最新推荐文章于 2020-07-29 11:28:57 发布

kogo2005

最新推荐文章于 2020-07-29 11:28:57 发布

阅读量455

点赞数

CC 4.0 BY-SA版权

文章标签： ie

本文链接：https://blog.youkuaiyun.com/kogo2005/article/details/1931488

本文探讨了在网页设计中遇到的浏览器兼容性问题，特别是在使用margin和padding时，在Firefox和Internet Explorer 7之间的显示差异。

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

这是前几天写一个网页的时候发现的. 最开始的时候height 和 margin 我都用了margin, 在IE7下看起来没有问题. 但是在FF下就会在纵向上多出一些空白. 换成padding就没有问题了.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

kogo2005

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

鸿蒙界面开发——通用属性（1）width&height&margin&padding等尺寸设置

littleyy666的博客

09-03

988

设置组件自身的宽度，缺省时使用元素自身内容需要的宽度。在TextInput组件中，width设置auto表示自适应文本宽度。在AlphabetIndexer组件中，width设置auto表示自适应宽度最大索引项的宽度。在Row、Column、RelativeContainer组件中，width、height设置auto表示自适应子组件。

行内元素能否设置width,height,padding,margin

chq11106004389的博客

11-23

4057

1.直观体现在排列上. 行内元素在直线上水平排开,处于同一行. 块级元素在垂直方向上排列,各个块级元素单独占据一行. 2.包容性一般会使用块级包含行内元素. 3.行内元素可以设置line-height,但盒子模型中的其余属性均无效(width/margin/padding)

参与评论您还未登录，请先登录后发表或查看评论

CSS布局中的几个重要属性,width,height,margin,padding,float,position

majian_1987的专栏

04-14

1913

首先来看看CSS中的盒子模型，如下图：我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围于其他物品要留出一定的空间。是不是这样就很容易理解盒模型了。所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式

css属性width默认值width: auto与width: 100%区别

热门推荐

dreamer_zhou的博客

10-12

2万+

css属性width默认值width: auto与width: 100%区别

CSS盒子weight、height和padding、border、margin的关系

xiaobai_IT_learn的博客

07-11

864

问题：我们定义的weight、height什么时候包括padding、border、margin或者什么时候不包括padding、border、margin？

各种元素的width height margin padding 特性

wnl_csdn的博客

11-24

594

一、各种元素的width height margin padding 特性（具体css元素的分来参看二） 1.块级元素width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。例如：div 2.行内替换元素width、 height、 margin的四个方向、 padding的四个方向都正常显示，遵循标准的css盒模型。例如：img 2.行

css行内元素padding,margin,width,height没有变化

09-25

由于这种布局差异，行内元素在设置一些CSS属性时表现得与块状元素大相径庭，特别在处理宽度（width）、高度（height）、内边距（padding）和外边距（margin）时。一、行内元素与宽度行内元素的宽度默认是根据内容...

div宽度设置width:100%后再设置padding或margin超出父元素的解决办法

09-28

在网页布局设计中，我们经常会遇到这样一个问题：当一个元素（如`div`）的宽度设置为`width: 100%`时，如果再添加`padding`或`margin`，元素的总尺寸会超出其父元素的宽度，导致布局混乱。为了解决这一问题，我们...

css height width padding margin 百分比取值的基准问题

JiM-W 的博客

01-08

5104

新地址：https://github.com/jimwmg/JiM-Blog 标准流下一首先，明确width height padding margin 取值可能的四个值：可能的值值描述 auto 浏览器计算内边距。 length 规定以具体单位计的内...

css外容器margin問題[IE中height:100%]

weixin_30432007的博客

06-18

常用的二列布局,外容器Div定義class為container, 包含class分別為left 和main兩個子DIV,下邊是class為foot的Div 當我們想在container和foot之間加一點間隙時,fifefox卻發起了脾氣代碼如下: <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""ht...

行高（line-height)、margin、float

淑娟的博客

03-21

1266

一.行高（line-height）将行高设置等于容器的高度可以让文本垂直居中 1.行高是可以继承的例： Document .father{ width:100px; height:30px; background:red; line-height:30px; } .son{ } abcef 二.margin

关于ie下 line-height 不兼容，采用margin-top解决办法

cms专家

08-07

3986

ie下对图片等非文字元素设置了

CSS盒模型、width、height、padding、border、margin（5）

sunnyaha12的博客

07-29

1373

一、CSS盒模型统计图解 CSS盒子模型(BoxModel)又称框模型，包含了元素内容(content)、内边距(padding)边框(border)、外边距(margin)几个要素。

MPU9250九轴传感器数据融合：扩展卡尔曼滤波（EKF）算法解析与应用——以四元数、陀螺仪和加速度计为核心 · 四元数

08-13

MPU9250 九轴传感器的工作原理及其应用背景，重点讲解了如何利用扩展卡尔曼滤波 (EKF) 进行数据融合。文中解释了选择四元数作为状态量、三轴陀螺仪的漂移作为控制量以及三轴加速度计和磁偏角作为观测量的原因。通过这种方式，在短时间尺度上优先信任陀螺仪提供的高精度角速度数据，而在长时间尺度上则依赖于加速度计提供的稳定姿态信息。此外，还提供了 Python 实现的简单 EKF 数据融合算法代码示例。适合人群：对传感器数据融合感兴趣的电子工程技术人员、自动化控制领域的研究人员、从事机器人导航系统开发的技术人员。使用场景及目标：适用于需要精确测量和稳定控制的场合，如无人机飞行控制系统、自动驾驶汽车的姿态感知模块、智能穿戴设备的动作捕捉单元等。目的是提高运动信息的准确性与稳定性。其他说明：本文不仅理论阐述详尽，而且附有实际代码示例，便于读者理解和实践。对于希望深入了解传感器数据融合技术并掌握其实现细节的专业人士而言，是一份非常有价值的参考资料。

S7-200与MCGS PLC控制抽水泵系统：梯形图程序、接线图及组态画面解析梯形图

08-13

No.201 S7-200与MCGS PLC在控制抽水泵系统中的应用。首先，文章讲解了梯形图程序作为控制逻辑的关键组成部分，展示了如何通过梯形图实现自动化控制，如当水位低于设定值时启动抽水泵电机。其次，文章阐述了IO分配与接线图原理图的重要性，通过合理的输入输出分配，确保系统的高效稳定运行。最后，文章介绍了MCGS PLC的组态画面，使操作人员能实时监控和管理系统，提供便捷的操作界面和故障排查工具。适合人群：从事工业自动化领域的工程师和技术人员，特别是对PLC控制系统有一定了解的人群。使用场景及目标：适用于需要理解和掌握S7-200与MCGS PLC在抽水泵系统中的具体应用场合，帮助工程师和技术人员更好地设计、安装和维护此类系统。其他说明：文章不仅提供了理论知识，还附有具体的实例和图表，便于读者理解和实践。

威纶通触摸屏配方管理模板（含图库与宏程序详解）

08-13

内容概要：本文深入介绍了威纶通触摸屏配方管理模板的应用，涵盖从模板概览、文件构成到宏程序详解等多个方面。首先，模板包含完整的图库、原图和PS原文件，用户可以通过直接拖拽的方式快速设计触摸屏界面，或者对原文件进行个性化修改。其次，文中详细解释了宏程序的工作原理，以一个简单的照明控制系统为例，展示了如何利用宏程序实现灯光的开关控制。最后，文章强调了这套模板在实际应用中的灵活性和高效性，无论是简单控制还是复杂工艺流程，都能提供极大便利。适合人群：从事自动化控制领域的工程师和技术人员，尤其是需要使用威纶通触摸屏进行项目开发的人员。使用场景及目标：适用于各类工业控制场景，旨在提高工作效率，简化触摸屏界面设计和配置过程，帮助用户更好地理解和应用宏程序。其他说明：本文不仅提供了理论指导，还通过具体实例进行了操作演示，确保读者能够在实践中掌握相关技能。

DC-Buck芯片TPS56637 4.5V-28V输入,6A

最新发布

08-13

同步降压，三阶环路调节

### 【工业自动化】西门子梯形图程序转换手册：指令与内存映射解析

08-13

内容概要：本文档是西门子梯形图程序转换器的操作手册附录，版本为 Rev 1.10。主要内容包括三大部分：指令转换列表、指令转换解决方案以及I/O内存转换表。指令转换列表详细列出了从S7-200到不同型号PLC（如CP1E、CP1L、CP1H）之间的指令对应关系，涵盖了逻辑操作、比较、定时器、计数器、数据移动、算术运算、转换指令等。对于某些复杂指令，提供了详细的转换解决方案。I/O内存转换表则详细说明了S7-200与各型号PLC之间输入输出寄存器、变量存储器、位存储器、定时器、计数器等内存区域的映射关系。此外，还包括特殊内存位的转换对照。适合人群：具有PLC编程基础的技术人员，特别是从事西门子S7-200系列PLC向其他品牌或型号PLC迁移工作的工程师。使用场景及目标：①帮助工程师将现有S7-200程序迁移到其他型号PLC上；②确保转换后的程序逻辑正确性和功能完整性；③提供详细的转换规则和步骤，减少迁移过程中可能出现的问题。其他说明：文档提供了详尽的指令和内存映射表，适用于多种应用场景。工程师可以根据具体需求选择合适的转换方案，并参考提供的详细说明进行实际操作。同时，对于一些复杂指令，文档给出了具体的转换方法和注意事项，有助于提高迁移的成功率。

margin和padding的使用例子

03-08

### CSS `margin` 和 `padding` 使用示例 #### 定义与区别 `margin` 属性设置元素外部边缘的空间，而 `padding` 设置的是元素内部内容与其边框之间的空间[^1]。 #### 示例代码展示下面是一些具体的例子来说明如何使用这两个属性： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Margin and Padding Example</title> <style> .box { width: 200px; height: 200px; background-color: lightblue; border: 5px solid black; /* 上下左右都相同的内外边距 */ margin: 20px; padding: 30px; /* 不同方向上的内外边距 */ margin-top: 10px; margin-right: 20px; margin-bottom: 30px; margin-left: 40px; padding-top: 5px; padding-right: 10px; padding-bottom: 15px; padding-left: 20px; } .short-hand-box { width: 200px; height: 200px; background-color: pink; border: 5px dashed darkred; /* 简写的内外边距 */ margin: 10px 20px 30px 40px; padding: 5px 10px 15px 20px; } .equal-margin-padding { width: 200px; height: 200px; background-color: lightgreen; border: 5px dotted navy; /* 当上下左右一致时可以简化写法 */ margin: 15px; padding: 10px; } </style> </head> <body> <div class="box"></div><br/> <div class="short-hand-box"></div><br/> <div class="equal-margin-padding"></div> </body> </html> ``` 上述HTML文档展示了三种不同方式应用 `margin` 和 `padding` 的盒子模型实例。通过这些样式规则可以看到，对于所有四个方向都有单独设定的情况以及全部相同或部分相同情况下的简短语法表示方法[^2]。