div+css中文字离div的边距要怎么设

html-css017

div+css中文字离div的边距要怎么设,第1张

1、首先我们创建一个html文件，引入必须的css文件后，创建一个父div和两个子div作为测试。

2、最简单的方法就是使用float浮动，将两个div进行左右浮动，即可设置出边距，这里适合使用百分比。

3、然后是使用margin外边距，这也是常用的方法，可以设置上下左右边距，这里使用float将两个子div并列。

4、这个方法也是margin方法，当时是使用display:inline-block来将两个div并列，需要注意的是这里会产生边距。

5、最后这个是使用padding内边距，需要有内容的情况下或者在子div中里面加入div以显示效果。

使用DIV+css 实现文字横排居中 并且有间距，首先文字需要有个块级元素包裹着，然后设定一定的宽度和高度，文字居中，css中有个text-align这个属性，设置成center，文字就是相对容器的宽度是居中的，请看代码：

<html>

<head>

<style>

#div1{

width:600px

height:40px

font-size:13px

}

#div1 p{

display:block

width:300px

height:30px

text-align:center

margin:0 auto

}

</head>

<body>

<div id='div1'>

<p>我是测试文字</p>

</div>

</body>

</html>

案例一、对margin上下设置为0 - TOP

<</span>html>

<</span>head>

<</span>meta charset="utf-8" />

<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>

<</span>style>

p{ line-height:20px}

.divcss5-a p{ margin:0 auto}

</</span>style>

</</span>head>

<</span>body>

<</span>div class="divcss5-a">

<</span>p>第一段</</span>p>

<</span>p>第二段<</span>br />第二段第二行</</span>p>

<</span>p>第三段</</span>p>

</</span>div>

</</span>body>

</</span>html>

设置margin-top为0,margin-bottom为0

案例二、对margin上下设置为30px - TOP

<</span>html>

<</span>head>

<</span>meta charset="utf-8" />

<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>

<</span>style>

p{ line-height:20px}

.divcss5-b p{ margin:30px auto}

</</span>style>

</</span>head>

<</span>body><</span>div class="divcss5-b">

<</span>p>第一段</</span>p>

<</span>p>第二段<</span>br />第二段第二行</</span>p>

<</span>p>第三段</</span>p>

</</span>div>

</</span>body>

</</span>html>

这里对对象".divcss5-b"设置了CSS margin:30px auto相当于设置margin-top为30px、margin-bottom为30px

案例三、对margin上下设置为0,padding上下为20px - TOP

<</span>html>

<</span>head>

<</span>meta charset="utf-8" />

<</span>title>p行距实例 在线演示 DIVCSS5</</span>title>

<</span>style>

p{ line-height:20px}

.divcss5-c p{ margin:0 autopadding:20px 0}

</</span>style>

</</span>head>

<</span>body>

<</span>div class="divcss5-c">

<</span>p>第一段</</span>p>

<</span>p>第二段<</span>br />第二段第二行</</span>p>

<</span>p>第三段</</span>p>

</</span>div>

</</span>body>

</</span>html>

以上设置了margin-top和margin-bottom均为0，然后我们设置padding-top和padding-bottom值为20px。