html设置内、外边距

197次阅读
没有评论

一、html设置外边距

html设置外边距用的是margin属性,这个属性有四个值,可以设置四条变的间距,但是一般只设置两个值,因为四个值会有两个值失效。实现代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    </style>
</head>
<body>
<div style="margin-left: 50px;">
    <h2>我是外边框</h2>
    <div style="width: 500px;height: 600px;border-style: solid">
        <div style="width: 300px;height: 400px;border-style: solid;margin: 50px 20px">
            <h2>我是内边框</h2>
        </div>
    </div>
</div>

</body>
</html>

效果图:

html设置内、外边距

但是这里还可以设置单边边距,只设置一个值,例如:

  • margin-top:设置的是上边距
  • margin-right:设置的是右边距
  • margin-bottom:设置的是下边距
  • margin-left:设置的是左边距

例如margin-top: 100px;  就是设置上边距是100px;

二、html设置内边距

html设置内边距用的属性是padding,属性值和外边距一样,也支持四个,但当设置四个值的时候,只有上边距和左边距生效。而且也支持设置单边的内边距:

  • padding-top 内上边距
  • padding-right 内右边距
  • padding-bottom 内下边距
  • padding-left 内左边距

代码示例如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border-style: solid;width: 200px;height: 150px;padding: 50px 30px;">
    这里设置内边距
</div>
<div style="border-style: solid;width: 200px;height: 150px;margin-top: 50px;padding-top: 50px; padding-left: 60px">
    这里设置内边距
</div>
</body>
</html>

代码释义:

这里为了显示效果,设置了边框,div元素的大小。但是这里主要讲解的还是内边距,例如:padding: 50px 30px; 表示设置此元素相对于父元素内上边距为50px,内左边距为30px。padding-top: 50px; 表示内上边距50px,padding-left: 60px; 表示内左边距60px。效果图如下:

html设置内、外边距

 

注意:有些人可能对内外边距的定义不是很清晰,其实这很好理解,因为我们的元素类似于一块砖,而基础在于元素边框。内边距表示的是当前元素内部距离边框边距,而外边距表示的是当前元素边框距离父元素的边距;

正文完
 
评论(没有评论)