Margin遭遇战

首先,起码知道Margin的两种写法,基础写法和“语法糖

基础写法

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

语法糖”:
把上面的基础写法合并简写:

div{margin:20px 10px 15px 30px;}

如果上右下左的边界都为10px;可以这么写:

div{ margin:10px;}

如果上下边界一样为10px,左右一样为20px,可以这么写:

div{ margin:10px 20px;}

以后检查别人的网页别又看不懂了,哭着回来找参考,啧啧。认识margin与在自己的网页里头使用margin还有很大的距离。搞不清的话还是一件很头疼的事情,要不然我现在也不会翻出这篇老博客来。也希望有这篇,一通百通,理解了bording(边框)/padding(填充)下面从我遇到的一次margin-left困难开始。

margin负值定位
容易知道,margin-left用来设置元素的左外边距,也就是左边界,就是这里红线的地方咯
这里写图片描述
看个教程的例子:
http://www.w3school.com.cn/tiy/t.asp?f=csse_margin-left
这个例子中margin-left的效果使得.leftmargin元素远离了body2cm
在试验这个例子过程中,我犯了错误,导致远离body的效果消失:

p.leftmargin {margin-left: 2cm blue;}

改成下面的就对了吧!毕竟教程里说

盒子模型的边框就是围绕着内容补白的线,这条线你可以设置它的粗细样式颜色(边框三个属性)。

    p.leftmargin {margin-left: 2cm;
    margin-color:blue;
}

然而还是错的,事实是,margin只能设置位置,不能加颜色或者说加颜色很麻烦,不常用嘛。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值