首页前端开发CSSdiv css margin-top认识与实例教程

div css margin-top认识与实例教程

时间2024-05-24 20:02:04发布访客分类CSS浏览83
导读:div css margin-top认识与实例教程篇 margin-top是设置该对象距离上一个对象间距,他是设置对象边框以外间距距离css样式。 一、margin-top语法 - TOP .divcss5{margin-top:10...

div css margin-top认识与实例教程篇

margin-top是设置该对象距离上一个对象间距,他是设置对象边框以外间距距离css样式。

一、margin-top语法 - TOP

  1. .divcss5{ margin-top:10px}

设置了对象".divcss5"上边间距为10px
相关教程:margin

二、margin-top应用实例 - TOP

为了观察效果,DIVCSS5实例设置3个DIV盒子,均设置相同的宽度、相同高度、相同css边框,对第二个div层设置margin-top:10px; 对第三个div层设置margin-top:20px,观察效果掌握margin-top样式作用。三个对象层分别DIV class命名为".div1"".div2"".div3"

1、div css实例完整HTML+CSS代码

  1. margin-top在线实例DIVCSS5
  2. .div1,.div2,.div3{ width:300px; height:80px; border:1pxsolid#F00}
  3. /*css注释说明:设置三对象相同宽度高度红色边框*/
  4. .div2{ margin-top:10px} /*css注释说明:设置对象距离上对象10px间距*/
  5. .div3{ margin-top:20px} /*divcss注释说明:设置对象距离上对象20px间距*/

DIVCSS5对".div2"".div3"选择器对象设置不同margin-top数值。

2、DIV+CSS margin-top实例截图


margin-top应用实例截图

3、在线演示:查看案例

4、打包下载源文件:

立即下载 (0.917KB

5、CSS样式使用总结
margin-top是设置对象距离上对象距离设置,如果对象没有设置背景、边框可以使用padding-top替代。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: div css margin-top认识与实例教程
本文地址: https://pptw.com/jishu/667254.html
div css文字字体行高行距 深入理解css行间距设置 linux怎么卸载jdk并重新安装

游客 回复需填写必要信息