Your SlideShare is downloading. ×
0
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Margin&Padding
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Margin&Padding

1,016

Published on

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,016
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. margin & padding
  • 2. 回顾一下定义 <ul><li>Margin: 外边距 </li></ul><ul><li>Padding: 内边距 </li></ul><ul><li>顺序:上右下左 </li></ul><ul><li> 上下和左右 </li></ul><ul><li>块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并 </li></ul>
  • 3. Margin 的用处 <ul><li>留白 </li></ul><ul><li>布局 </li></ul>20px 30px 15px
  • 4. 特殊用法 <ul><li>Margin 可以取负值。 </li></ul>Margin-left:-20px;
  • 5. 特殊用法 <ul><li>居中: margin:0 auto; </li></ul><ul><li>IE6 有时会出现无法居中的情况。在父级元素上设置 text-align:center ;解决。 </li></ul>Margin:0 auto; Width:970px;
  • 6. Padding 的用法 Padding-left:10px;
  • 7. Padding 的用法 用于固定容器内子元素所在的位置。 背景图片可以存在于 padding 占据的空间。
  • 8. Padding 的用法 当背景图片充满整个容器时,用 padding 来固定子元素的位置,而不用子 元素的 margin 值。 文字内容文字内容文字内容 背景图片
  • 9. 精确的布局 LOGO 电话 语言 导航 搜索 10px 15px

×