css 内外边距如何使用?

css 内外边距如何使用?下面本篇文章给大家介绍一下CSS padding(内边距)、margin(外边距)的使用方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

padding 内边距

padding 属性用来指定元素的内容与元素边框之间的空隙。

padding 属性的单位通常是像素,也可以是EM和百分比。

如果使用百分比,内边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定,后面再添加内边距,原来盒子的整体大小会增大。

如下面的示例:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内边距padding</title>
    <style>
        p{
            width:300px;
            border:2px solid #333;
        }
        p.one{
            padding:10px;
        }
    </style>
</head>
<body>
<p>测试文本!</p>
<p class="one">测试文本!测试文本!</p>
</body>
</html>

效果图:

1.png

内边距还有4个方向的属性,分别指明4个内边。

  • padding-top

  • padding-right

  • padding-bottom

  • padding-left

这样排序的序列是因为padding属性的快捷试写法指定的值是按这样的序列的。

分别为4个内边距设置不同的数值,可以做不不规则的外观。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不规则内边距padding</title>
    <style>
        p{
            width:300px;
            border:2px solid #333;
        }
        p.one{
            padding-top:20px;
            padding-right:30px;
            padding-bottom:10px;
            padding-left:50px;
        }
    </style>
</head>
<body>
<p>测试文本!</p>
<p class="one">测试文本!测试文本!</p>
</body>
</html>

2.png

margin 外边距

margin 属性用来指定盒子之间的空隙。

margin 属性的单位通常是像素,也可以是EM和百分比。

如果使用百分比,外边距就是浏览器窗口的一个百分比。

如果一个盒子的宽度已经指定,后面再添加外边距,原来盒子的整体大小会增大。

两个一样大小的盒子,有外边距的盒子会多出空隙。

示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外边距margin</title>
    <style>
        p{
            width:300px;
            border:2px solid #333;
            padding:10px;
        }
        p.one{
            margin:10px;
        }
    </style>
</head>
<body>
<p>测试文本!</p>
<p>测试文本!测试文本!</p>
</body>
</html>

3.png

下面的盒子有外边,上面的盒子没有外边,放在一起就产生了折叠效果。

外边距在页面排版细节处理上特别有用,如一点细微调整、对齐等。

外边距还有4个方向的属性,分别指明4个外边。

  • margin-top

  • margin-right

  • margin-bottom

  • margin-left

这样排序的序列是因为margin属性的快捷试写法指定的值是按这样的序列的。

分别为4个外边距设置不同的数值,可以做不不规则的外观。

示例,略,大家可以尝试下。

内容居中

居中是排版中常见的需求,有文本居中对齐,盒子居中对齐。

盒子居中对齐很简单,只要将margin-left和margin-rigth的值设置为auto即可。

如果要盒子在页面中居中,需要为盒子指定一个宽度。

示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子居中</title>
    <style>
        p{
            width:300px;
            border:2px solid #333;
            padding:10px;
            margin-top:100px;
            margin-left:auto;
            margin-right:auto;
        }
    </style>
</head>
<body>
<p>测试文本!测试文本!</p>
</body>
</html>

4.png

更多web前端知识,请查阅 HTML中文网 !!

以上就是css 内外边距如何使用?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏