码迷,mamicode.com
首页 > 其他好文 > 详细

padding margin

时间:2018-07-20 13:51:23      阅读:125      评论:0      收藏:0      [点我收藏+]

标签:col   bottom   red   空白   ade   用法   color   html   style   

padding:内边距

margin:外边距

内外边距是针对本标签相对于它相邻的标签而言。

  margin: 10px;是本标签与它周围上下左右有10像素的空白。

  padding: 10px;本标签其实与它周的标签是紧贴着的,是本标签的边界与本标签的内容有10像素背景颜色距离。

  它们都有单独的margin-top left right bottom区别

<div style="width: 500px;border: 1px solid red;">
    <div style="height: 160px;width: 160px;border: 1px solid green;">1</div>
    <div style="background-color: rebeccapurple;margin: 10px;">2</div>
    <div style="background-color: rebeccapurple;padding-top: 10px;">2</div>
</div>

  margin: 0 auto;的用法,几乎所有的网站都是这样用的,让抬头居中对齐,auto就是左右距离自动的意思.

<div class="pg-header">
    <div style="width: 980px;margin: 0 auto;">
        <div style="float: left;">收藏本站</div>
        <div style="float: right;">
            <a>登录</a>
            <a>注册</a>
        </div>
    </div>
    <div style="clear: both;"></div>
</div>

  

padding margin

标签:col   bottom   red   空白   ade   用法   color   html   style   

原文地址:https://www.cnblogs.com/alex-hrg/p/9340881.html

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