码迷,mamicode.com
首页 > Web开发 > 详细

CSS margin属性取值

时间:2017-07-30 10:15:03      阅读:944      评论:0      收藏:0      [点我收藏+]

标签:size   margin   左移   gre   分享   com   targe   org   develop   

margin表示一个元素的外边距。取值为正值时,表示相对于正常流离邻近元素更远,而取负值时,使其更近

但是,设置margin后,四个方向的表现形式不同

自身发生移动:top、left

  • margin-top
<div id="negtive_top">
<div>margin-top: -50px;自身向上移动50px</div>
</div>

CSS

#negtive_top{
    background-color: green;
    border: 2px solid red;
}
#negtive_top div{
    background-color: yellow;
    border: 2px solid red;
    opacity: 0.5;
    margin-top: -50px;
}

 

 技术分享
  • margin-left
<div id="negtive_left">
<div>margin-left: -50px;自身向左移动50px</div>
</div>

CSS

#negtive_left{
    background-color: green;
    border: 2px solid red;
}
#negtive_left div{
    background-color: yellow;
    opacity: 0.5;
    margin-left: -50px;
    border: 2px solid red;
}
技术分享

邻近元素移动:right、bottom

  • margin-right
<div id="negtive_right">margin-right: -50px;右边的元素向左移动50px</div>
<div></div>

CSS

#negtive_right{
    background-color: green;
    border: 2px solid red;
    float: left;    
    margin-right: -50px;
}
#negtive_right+div{
    background-color: yellow;
    opacity: 0.5;
    border: 2px solid red;
    float: left;
}
技术分享
  • margin-bottom
<div id="negtive_bottom">margin-bottom: -50px;下方的元素向上移动50px</div>
<div></div>

CSS

#negtive_bottom{
    background-color: green;
    border: 2px solid red;    
    margin-bottom: -50px;
}
#negtive_bottom +div{
    background-color: yellow;
    opacity: 0.5;
    border: 2px solid red;
}
技术分享

参考

https://developer.mozilla.org/zh-CN/docs/Web/CSS/margin

CSS margin属性取值

标签:size   margin   左移   gre   分享   com   targe   org   develop   

原文地址:http://www.cnblogs.com/coolqiyu/p/7258086.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!