css间隔样式,css设置间隔

css如何设置div子容器之间的间距

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的style标签中，输入css代码：.sub{margin-top: 30px;}。

3、浏览器运行index.html页面，此时3个div子子容器的垂直间距被统一设置为了30px。

相关问答

Q1: 在css中每个样式定义完后,要用什么来间隔其它样式？

css样式

直接换行。如果不记得的话建议可以自己直接写一下代码试试。

Q2: css字与字之间的间距怎么调

1.在文件夹中创建一个“test”的html文件。如图所示

2.在里面添加html标签框架。如图所示

3.在里面添加一个“div”并放入文字。如图所示

4.然后我们发现默认文字之间比较紧凑。如图所示

5.现在我们给div设置一个id为“wd”。如图所示

6.通过css在style使用letter-spacing给wd中的文字设置字间距为30px。#wd{letter-spacing:30px;}如图所示

7.在浏览器中打开我们发现字间距变大了。如图所示

Q3: CSS中如何控制段落间的距离

CSS中如何控制段落间的距离方法：

1、line-height为20px案例，DIV+CSS代码：

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

title段落案例/title 

style 

p{ line-height:20px} 

/* css 注释： 设置行高为20px */ 

/style 

/head 

body 

p第一段，第一行br / 

第二行/p 

p第二段/p 

p第三段/p 

/body 

/html

行高line-height实现段落间距

分别设置20px和50px行高样式案例，对比发现不同行高值，段落上下间距也产生不同距离，所以使用line-height可以设置段落间距距离，但这里不推荐使用line-height设置段落之间间距。

二、css padding内补白（内边距）

可以推荐使用padding设置段落上下间距。通过设置上下内补白，内距离即可实现p段落上下间距设置。

关键字：p{padding:10px 0}

接下来DIVCSS5以案例演示CSS段落上下距离设置。

1、设置上下内补白为10px(padding:10px 0)

完整css+div代码：

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

title段落案例/title 

style 

p{ padding:10px 0} 

/* css注释： 设置padding为上下10px */ 

/style 

/head 

body 

p第一段，第一行br / 

第二行/p 

p第二段/p 

p第三段/p 

/body 

/html

padding段落间距

2、设置上下内补白为30px(padding:30px 0)

div css代码如下：

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

title段落案例/title 

style 

p{ padding:30px 0} 

/* css注释： 设置padding为上下30px */ 

/style 

/head 

body 

p第一段，第一行br / 

第二行/p 

p第二段/p 

p第三段/p 

/body 

/html

上下padding间距为30px效果

通过对p标签设置padding上下补白即可实现段落之间间距，同时推荐使用padding样式实现段落间距距离设置。

三、css margin外边距

CSS段落间距调整之margin实现上下段落之间间距距离样式设置，我们知道margin是设置上下左右对象与对象之间距离设置，这里段落也可以使用此css样式实现间距。这里DIVCSS5依然以设置两组margin样式进行对比观察。

关键样式单词：p{margin:10px 0}

1、css设置margin上下间距为10px,html+css代码：

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

title段落案例/title 

style 

p{margin:10px 0} 

/* css注释： 设置margin为对象上下间距10px */ 

/style 

/head 

body 

p第一段，第一行br / 

第二行/p 

p第二段/p 

p第三段/p 

/body 

/html

设置margin段落上下间距为10px

2、css设置margin上下间距为30px，完整代码如下：

!DOCTYPE html 

html 

head 

meta http-equiv="Content-Type" content="text/html; charset=utf-8" / 

title段落案例/title 

style 

p{margin:30px 0} 

/* css注释： 设置margin为对象上下间距30px */ 

/style 

/head 

body 

p第一段，第一行br / 

第二行/p 

p第二段/p 

p第三段/p 

/body 

/html

设置p标签上下margin间距为30px

观察margin上下间距设置为10px和30px实现了间距调整目的，这里也推荐使用margin对段落上下间距设置。

Q4: 怎样使用CSS设置文字与文字间距距离

我们使用css样式属性letter-spacing：+距离数字+html单位

如letter-spacing:15px;即设置了字与字距离间隔15px

Q5: 请问css样式如何设置table表格之间的间隔。像这样：

table

trtd style="border:1px solid black;width:50px;height:10px"/td/tr

trtd style="border:1px solid black;width:50px;height:10px"/td/tr

/table

table 不加外框（不用border）

td或th中使用style，如果要调节宽度，可以修改width中的值。

如果想要调节行与行之间的宽度，可以在行之间加入一个空行trtd /td/tr

想要调多宽就加多少个。

trtd style="border:1px solid black;width:50px;height:10px"/td/tr

trtd /td/tr

trtd style="border:1px solid black;width:50px;height:10px"/td/tr