css中margin如何使用?

外边距margin的样式在CSS样式是经常使用到的一个样式,它可以对HTML元素的外边距进行调整布局,下面介绍它的详细使用。

css中margin如何使用?

这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。

可以填写的值:

描述
auto浏览器计算外边距。
length规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。
/em>规定基于父元素的宽度的百分比的外边距。
inherit规定应该从父元素继承外边距。

使用示例:

<html>
<head>
    <style type="text/css">
        p.margin {margin: 2cm 4cm 3cm 4cm}
    </style>
</head>
<body>
    <p>这个段落没有指定外边距。</p>
    <p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。
    这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
    <p>这个段落没有指定外边距。</p>
</body>
</html>

运行效果:(推荐学习:CSS视频教程

margin使用技巧:

使用margin: 0 auto实现元素水平居中。

<div class="wrap">
   <div class="app">margin: 0 auto;</div> 
</div>

<style>
.wrap{
    background: skyblue;
}
.app{
    margin: 0 auto;
    width: 120px;
    height: 120px;
    border: 1px solid #000;
}
</style>

更多CSS3相关技术文章,请访问CSS3答疑栏目进行学习!

以上就是css中margin如何使用?的详细内容,更多请关注易知道|edz.cc其它相关文章!

推荐阅读