padding margin

Posted 2020-12-05 alex-hrg

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>