资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css怎么设置div之间距离

本篇内容介绍了“css怎么设置div之间距离”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

创新互联是专业的松滋网站建设公司,松滋接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行松滋网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

方法:1、给div元素添加“margin-top:间距值;”或者“margin-bottom:间距值;”样式来设置div间的上下距离;2、给div元素添加“margin:上边距 右边距 下边距 左边距;”样式设置div间的距离即可。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css如何设置div之间距离的方法

1、新建一个html文件,命名为test.html,用于讲解如何用css设置div与div之间的间距。创建两个div,并分别设置其class属性为div1,div2,主要用于下面对类名进行样式的定义。使用css设置两个div的宽高都为200px,并分别设置两个div不同的背景颜色。

css怎么设置div之间距离

输出结果为:

css怎么设置div之间距离

2、使用margin-top设置div的顶部与其他div的间距,例如,下面使用css设置了第二个div的顶部与第一个div的间距为10px。

css怎么设置div之间距离

输出结果:

css怎么设置div之间距离

也可以使用margin-bottom设置div的底部与旁边div的间距,例如,下面使用css设置了第一个div的底部与第二个div的顶部间距为10px。

css怎么设置div之间距离

输出结果与上述示例相同。

3、使用margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。

示例如下:




    
    
    
    Document


    
    div{
        width:200px;
        height:200px;
    }
    .div1{
        background:red;
        margin:0 0 20px 0;
    }
    .div2{
        background:yellow;
    }
    
第一个div
第二个div

输出结果:

css怎么设置div之间距离

“css怎么设置div之间距离”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站,小编将为大家输出更多高质量的实用文章!


当前标题:css怎么设置div之间距离
标题链接:http://www.cdkjz.cn/article/jjoeog.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220