• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > CSS外边距合并代码

CSS外边距合并代码

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含外边距,合并等相关知识,佚名 希望在学习及工作中可以帮助到您
请看下面的图,就对边距的理解很清晰了。


我习惯把 图中所示的margin边界称为外边距,padding填充部分称之为内边距。设置外边距最好的一个方法就是设置margin值,同理,设置内边距的最好 办法就是设置padding了。设置内边距没什么好说的,设置的值是多少就是多少,不会出现什么异常,即浏览器的兼容性方面,但外边距就不一样了。

设置外边距,首先想到的是应该是双边距的问题。如果设这边距的这个元素同时设置了浮 动,那么浮动的这个方向如果有margin值的话,那么在ie6里面的实际距离是设置值的双倍。要解决这个问题不复杂,只要给这个元素加个 display:inline属性即可,但不建议这么做,因为这无形中增加了代码的质量,带宽很贵的哦,最好的办法就是在浮动的方向不设置margin 值,因为这个可以用其他的方法实现的,比如padding,或者设置在父层节点的style。

在一个问题就是垂直双编剧的合并问题。当两个垂直的双边距相遇时,它们将形成一个边距,合并后的边距等于发生合并的边距的较大值。


实际两个模块的间距是20,这就是垂直双编剧的合并问题了。有时候遇到这样的情况不知所然,不知怎么回事,后来才知道了垂直双边距。知道了问题 的根源,那么解决这个问题的最好办法就是避免这个问题的出现了。我是这么做的,比较懒惰的作法,不过绝对有效哈。

还有一个很不人性化的规范,就是一 个盒子,即一个模块如果没有上边距(margin-top)或者上边框(border-top),那么这个盒子的上边距会和这个盒子的第一个子元素的上边 距重合。不说什么了,把代码和效果贴上,直观,易理解。知道了问题所在就知道了怎么避免问题的出现了。


我对这些的理解都是基于css中的盒子模型,不知道大家有没关注过,我会在后来博文中补上盒子模型这一点,希望大家关注。第一次写博客,感觉有点不习惯,我会坚持,提高自己的文字水平,努力让自己有一个提高,同时也能将我的观点和大家分享。

您可能想查找下面的文章:

  • 简单的CSS叠加外边距示例
  • 常用技巧margin负外边距的使用介绍
  • 使用绝对定位+负外边距让DIV层水平垂直居中页面
  • CSS外边距合并代码
  • css 空白外边距互相叠加的解决方法

相关文章

  • 2017-08-06css中ul li的背景小图标属性设置的两种情况
  • 2017-08-06CSS下背景属性background的使用方法
  • 2017-08-06一个挺常用的float布局div问题解决方法
  • 2017-08-06让几个横向排列的浮动子div居中显示的方法
  • 2017-08-06CSS设计之页面滚动条出现时防止页面跳动的方法
  • 2017-08-06解析CSS编写中的属性优先级问题
  • 2017-08-06css控制水平衡线hr标签样式去掉其阴影效果
  • 2017-08-06css3隔行变换色实现示例
  • 2017-08-06CSS隐藏页面元素的5种方法
  • 2017-08-06有关网站网页设计中的那些事儿分享

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • CSS控制二级菜单动态出现不只有js才能做到
    • 用CSS的float和clear属性进行三栏网页布局
    • 多角色选项卡登录效果
    • css实现鼠标滑过改变文字(中文变英文)
    • 网页设计经验谈:常用的网页设计工具的收集介绍
    • CSS隐藏元素五种方法
    • CSS和“★”字符制做的中国国旗实现代码
    • 谨慎使用CSS中的星号(*)通配符
    • 解决img在div中居中的问题
    • ie6不支持hover ie6 标签(除a标签)不支持伪类:hover解决方案

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有