热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

css中marginbottom属性怎么用

这篇文章给大家分享的是有关css中marginbottom属性怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。margin-bot

这篇文章给大家分享的是有关css中marginbottom属性怎么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

  margin-bottom是CSS的属性,所有主流浏览器都支持margin-bottom属性。margin,是CSS语法,这个简写属性用于在一个声明中设置所有当前或者指定元素所有外边距的宽度,或者设置各边上外边距的宽度。

  marginbottom简介

  margin-bottom

  语法编辑

  margin-bottom:[||auto]{1,4}

  默认值:0

  相关属性:[margin]||[margin-top]||[margin-right]||[margin-left]

  取值编辑

  auto:

  值被设置为相对边的值

  

  用长度值来定义外补白。可以为负值

  

  用百分比来定义外补白。可以为负值

  说明编辑

  检索或设置对象底边的外延边距。

  内联对象要使用该属性必须先使该对象表现为块级或内联块级。

  外延边距始终透明。

  对应的脚本特性为marginBottom。

  marginbottom简洁写法

  margin跟padding一样,也有简洁写法。我们可以使用margin属性来设置四个方向的外边距。在实际编程中,我们往往使用的是margin的这种高效简洁写法来编程。

  margin写法有4种,分别如下:

  margin:像素值1;

  margin:像素值1像素值2;

  margin:像素值1像素值2像素值3;

  margin:像素值1像素值2像素值3像素值4;

  以上四个位置按顺序分别为:margin-top--margin-right--margin-bottom--margin-left,即“上-右-下-左”。以下简写为top--right--bottom--left。其中需要注意的是后三种情况,当有像素值缺省时,浏览器会自动对缺省像素按照“bottom=top”和“left=right”的方法进行赋值。

  例如:

  “margin:20px;”表示四个方向的外边距都是20px;

  “margin:20px40px;”表示top为20px,right为40px;由于bottom和left缺省,所以自动将它们分别设为20px和40px。转化为第4种写法为:“margin:20px40px20px40px;”。

  “margin:20px40px60px;”表示top为20px,right为40px,bottom为60px;由于left缺省,所以自动将它设为40px。转化为第4种写法为:“margin:20px40px60px40px;”。

  需要注意的是一种情况不能写为缺省写法:“margin:20px40px20px60px;”。该例中,由于top和bottom相同,但right和left不同,所以不能将bottom缺省,否则会等同于“margin:20px40px60px40px;”。

感谢各位的阅读!关于“css中marginbottom属性怎么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


推荐阅读
  • CentOS 系统管理基础
    本文介绍了如何在 CentOS 中查询系统版本、内核版本、位数以及磁盘分区的相关知识。通过这些命令,用户可以快速了解系统的配置和磁盘结构。 ... [详细]
  • Spring Boot 中静态资源映射详解
    本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理,包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文,您将了解如何高效地管理和引用静态资源。 ... [详细]
  • 推荐几款高效测量图片像素的工具
    本文介绍了几款适用于Web前端开发的工具,这些工具可以帮助用户在图片上绘制线条并精确测量其像素长度。对于需要进行图像处理或设计工作的开发者来说非常实用。 ... [详细]
  • 本文将详细介绍如何在没有显示器的情况下,使用Raspberry Pi Imager为树莓派4B安装操作系统,并进行基本配置,包括设置SSH、WiFi连接以及更新软件源。 ... [详细]
  • 本文介绍了如何在PHP Magento模型中自定义主键,避免使用默认的自动递增主键,并提供了解决方案和代码示例。 ... [详细]
  • 对于许多初学者而言,遇到总线错误(bus error)或段错误(segmentation fault/core dump)是极其令人困扰的。本文详细探讨了这两种错误的成因、表现形式及解决方法,并提供了实用的调试技巧。 ... [详细]
  • 主调|大侠_重温C++ ... [详细]
  • 深入理解Java多线程并发处理:基础与实践
    本文探讨了Java中的多线程并发处理机制,从基本概念到实际应用,帮助读者全面理解并掌握多线程编程技巧。通过实例解析和理论阐述,确保初学者也能轻松入门。 ... [详细]
  • 解决IDEA配置JSP时与他人步骤不一致的问题
    本文详细探讨了在配置IntelliJ IDEA开发环境时遇到的JSP配置步骤差异问题,并提供了解决方案和最佳实践。 ... [详细]
  • MongoDB的核心特性与架构解析
    本文深入探讨了MongoDB的核心特性,包括其强大的查询语言、灵活的文档模型以及高效的索引机制。此外,还详细介绍了MongoDB的体系结构,解释了其文档、集合和数据库的层次关系,并对比了MongoDB与传统关系型数据库(如MySQL)的逻辑结构。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 创建一个功能齐全的联系我们表单,包括布局和样式设计。 ... [详细]
  • MySQL中的日期格式转换函数:STR_TO_DATE与DATE_FORMAT
    本文详细介绍了MySQL中用于日期格式转换的两个重要函数:STR_TO_DATE和DATE_FORMAT。通过具体示例,帮助读者更好地理解和应用这些函数。 ... [详细]
  • 本文详细介绍了如何使用 HTML 和 CSS 对文件上传按钮进行样式美化,使用户界面更加友好和美观。 ... [详细]
  • 本文详细介绍了Java中实现异步调用的多种方式,包括线程创建、Future接口、CompletableFuture类以及Spring框架的@Async注解。通过代码示例和深入解析,帮助读者理解并掌握这些技术。 ... [详细]
  • 本文详细介绍如何使用 Apache Spark 执行基本任务,包括启动 Spark Shell、运行示例程序以及编写简单的 WordCount 程序。同时提供了参数配置的注意事项和优化建议。 ... [详细]
author-avatar
白变小樱啊
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有