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

例如:
<div>
<div></div>
<div></div>
<div></div>
</div>
如何设置里面3个子容器相距的垂直距离
div 显示在最外层。如何设置,比如我现在有多个div。当鼠标移动到某个div时,最外层显示。
<div>
<div>1</div>
<div>2</div>
<div>3</div>
</div>

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

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

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

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

温馨提示:内容为网友见解,仅供参考
第1个回答  2019-06-12

1、使用css的margin属性设置。首先打开hbuilder软件,新建一个html文件,在html里面写入html结构,在给每个子div设置一个class属性:

2、接着在上方的style标签中设置这个名叫div的class的css样式,这里把文字字号放大并加入了边框,然后就可以使用margin属性设置子容器之间的间距了,margin中前面的是设置上下间距,后面的则是左右间距,最后根据自己的需要设置即可:

3、来到浏览器即可看到效果,三个div的间距都是20px。以上就是cs设置div子容器之间的间距的方法:

本回答被网友采纳
第2个回答  推荐于2017-09-18

用padding 属性来控制 padding是指自身边框到自身内部另一个容器边框之间的距离,就是容器内距离。


  
·语法结构


(1)padding-left:10px; 左内边距


(2)padding-right:10px; 右内边距


(3)padding-top:10px; 上内边距


(4)padding-bottom:10px; 下内边距


(5)padding:10px; 四边统一内边距


(6)padding:10px 20px; 上下、左右内边距


(7)padding:10px 20px 30px; 上、左右、下内边距


(8)padding:10px 20px 30px 40px; 上、右、下、左内边距


用margin 属性来控制:margin是指从自身边框到另一个容器边框之间的距离,就是容器外距离


  ·语法结构


(1)margin-left:10px; 左外边距


(2)margin-right:10px; 右外边距


(3)margin-top:10px; 上外边距


(4)margin-bottom:10px; 下外边距


(5)margin:10px; 四边统一外边距


(6)margin:10px 20px; 上下、左右外边距


(7)margin:10px 20px 30px; 上、左右、下外边距


(8)margin:10px 20px 30px 40px; 上、右、下、左外边距


  margin和padding的区别用图表示为:


第3个回答  推荐于2017-09-02
<div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
<div style='margin-top:10px;margin-bottom:10px;"></div>
</div>
每个层距顶部10个像素,距底部10个像素。本回答被提问者采纳
第4个回答  2012-03-23
一般是用margin来设置的,可以写用CSS写样式,或者直接在HTML标签里加style
例如:<div style="margin:15px"></div>不过这个的话就每个标签里都要加哦,比较麻烦的,如果做简单的页面的话就没事了。

css如何设置div子容器之间的间距
1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的<style>标签中,输入css代码:.sub{margin-top: 30px;}。3、浏览器运行index.html页面,此时3个div子子容器的垂直间距被统一设置为了30px。

div+css中文字离div的边距要怎么设
1、首先我们创建一个html文件,引入必须的css文件后,创建一个父div和两个子div作为测试。2、最简单的方法就是使用float浮动,将两个div进行左右浮动,即可设置出边距,这里适合使用百分比。3、然后是使用margin外边距,这也是常用的方法,可以设置上下左右边距,这里使用float将两个子div并列。4、这个方法...

怎么设置div与div间的间距
可以使用CSS margin 属性,控制两个div的距离 定义和用法 margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。说明 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的...

css 一个div里套了四个小div 如何让他们自动分配间距,高度被设定的情况...
利用CSS3 新添加的盒子模型属性 box-flex;可以让子容器针对父容器的宽度按一定规则进行划分。ie 目前不支持,估计后续版本会兼容这个属性。必须在父元素上面加上display:box; 才可以对子元素进行规则划分。box-flex:1;这里的 1 指的是比例 。如:<!DOCTYPE html><head> <title><\/title> <s...

CSS 两个DIV在同一列中 如何上下有间距
元素之间的边距可以使用margin来实现:margin:top right bottom left; \/*分别为上右下左边距*\/这属于CSS 框模型 (Box Model)—— 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式:围绕在元素边框的空白区域是外边距,设置外边距会在元素外创建额外的“空白”。设置外边距的最简单的方法就...

div+css里如何设置子行间距
一般来说 都是在 div中 添加 ol 或 ul 比如:<ul> <li>河北<\/li> <li>河南<\/li> <li>山东<\/li> <\/ul> 他们是 在同一行显示的 那中间的间距 就用 div(id)li{ padding-left(right):} 也可以 padding:0 *px; 前面的0是上下为0 *px是 左右都加*px的 内补丁...

CSS怎么定义模块与模块之间的距离?
CSS定义模块与模块之间的距离,现在的布局一般都是通过div+css来布局,定义好每个块的宽度和高度,设置每个块的距离话,我们通过margin这个属性来设置,margin的用法如图:我们可以通过代码来理解:<html> <head> <style> .headr{ width:300px;height:200px;border:1px solid #f00;} .wenzi{ width:...

CSS 两个DIV在同一列中 如何上下有间距
{margin: 40px 0px;}就可以了 40表示上下边界,0表示左右边界,自己改

css如何将两个小盒子水平居中 而且间距30
将两个小盒子水平居中 通常是使用 margin auto来实现,间距30 可以外边距都为 15 ,也可以在一个盒子设置外边距为30 px。这里可以用两种方法来解决,第一个就是给他们一个父元素,两个盒子加上边边距就是430 为父元素的宽 ,加上margin 0 auto的属性就实现了第二就是用弹性盒来做 同样加父...

css怎么自动调整div的位置和大小
6、写样式用".pingmu{}"开始写,给它固定宽高,再添加背景色,让p自适应宽高,超过部分显示滚动条。7、将这个css样式保存到同级目录下,如ceshi.html在c盘,css样式也保存在c盘。8、保存好样式后,双击这个ceshi.html页面,用浏览器打开后看到100像素宽高的黑块。DW怎么设置DIV模块在页面中居中?D...

相似回答