CSS外边距及盒子居中对齐

来源：互联网发布：儋州市政务网通知公布编辑：程序博客网时间：2024/05/22 06:54

外边距（margin）

语法：

margin-left: 左外边距（常用）

margin-right: 右外边距

margin-top:上外边距（常用）

margin-bottom: 下外边距

*margin: 上外边距右外边距下外边距左外边距（取值顺序与内边距相同）

注意的是：外边距可以实现盒子居中。

一个盒子实现水平居中的两个条件：

1.必须是块级元素

2.盒子必须制定宽度（width）

然后就给左右边距都设定为auto 就可以实现盒子水平居中。

代码如下：

margin: 20px auto;//20指上下 auto 指左右

代码如下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;/*background-color: pink;*/

/*margin-top: 20px;

margin-left: 50px;*/margin: 30px auto;/*//上下30，左右auto  盒子会实现居中对齐*/

padding: 4px;

border: 1px solid red;

header /*, span*/{

width: 900px;

height: 120px;

background-color: black;

margin: 20px auto;

/*span 是行内元素，必须转化为块级元素才能实现水平居中*/

</style>

</head>

<body>

<div></div>

<header>头部标签</header>

<span></span>

</body>

</html>

阅读全文

0 0