`

DIV间距设置(转帖)

webhtmldiv 
阅读更多


DIV间距设置

 

DIV间距设置专题-DIVCSS5

目录
  1. 清除上下DIV的间隙间距
  2. 更多DIV间距解决方法
  3. 设置DIV盒子间距
  4. 左右DIV结构设置间距
  5. DIV间距小结

一、消除上下结构距离    -   TOP

DIV之间距离
让两个上下结构DIV块距离为零，通常新手在制作DIV CSS页面的时候，不会考虑到初始化CSS属性，这样各标签属性默认的CSS属性将会造成错位、兼容等问题。
如上下结构的2个box DIV块，中间有一定间距无法消除

二、清除DIV间距解决方法   -   TOP

在CSS里设置DIV标签各属性参数为0
div{margin:0;border:0;padding:0;}
这里就设置了DIV标签CSS属性相当于初始化了DIV标签CSS属性，这里设置margin外边距为0；边框border属性为0和内补白也为0；这样相当于就初始化了DIV盒子之间距各属性距离为0，这样就不会造成DIV直接有一定的距离。

当然推荐在制作开发DIV CSS的时候最好将网页CSS属性、常用网页标签初始化一下。
CSS初始化技巧地址：http://www.divcss5.com/template/m17.shtml

三、设置DIV盒子之间间距   -   TOP

以上是使用CSS清除盒子之间距离。接下来为大家介绍设置盒子之间间距。

使用CSS样式单词为margin（可进入CSS margin教程了解详细使用方法）。

1、设置对象的上下间距

  1. .divcss5-a{margin:10px 0} 

设置“divcss5-a”对象上下间距为10px,左右为0

2、设置对象左右距离

 

  1. .divcss5-b{margin:0 8px} 

设置“divcss5-b”对象上下间距为0,左右为8px

 

3、设置DIV盒子与上方相邻间距

 

  1. .divcss5-c{margin-top:10px} 

设置“divcss5-c”对象与上方相邻间距为10px

 

4、设置DIV盒子与下方相邻距离

 

  1. .divcss5-d{margin-bottom:10px} 

设置“divcss5-d”对象与下方相邻间距为10px

 

5、设置DIV盒子与左方相邻间距

 

  1. .divcss5-e{margin-left:9px} 

设置“divcss5-e”对象与左侧方相邻间距为9px

 

6、设置盒子与右方相邻距离

 

  1. .divcss5-f{margin-right:12px} 

设置“divcss5-f”对象与右方相邻间距为12px

以上我们为了方便介绍margin设置对象外间距，将对象分别CSS命名为".divcss5-a"至“.divcss5-f”,实际使用时候更加需求命名。

 

四、让左右结构内容之间有一定间距距离   -   TOP

CSS案例图-DIV之间距离
如上图，左右结构内容之间一定距离设置技巧

解决方法与技巧：
一般我们使用float 浮动属性（float:left（局左）、float:right（居右））来解决此问题。这样的布局一般总的宽度一定，只需左、右内容DIV宽度设置小于总宽度即可实现，注意的是宽度计算一定是包括自己设置宽度+边框宽度+padding宽度+margin宽度组成。
提示：在DIV CSS制作中很多时候需要计算的如这样的布局。

 

实例图：

DIV+CSS设置内容之间间距设置
实现以上效果，提示总宽度为200px,而左右布局都有边框并中间间隔一定距离，这里为了样式所以距离设置比较大。

CSS代码：

  1. .div-c{width:200px;} 
  2. .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} 
  3. .div-b{ float:right; width:120px; border:1px solid #999; height:60px;} 

Html代码：

  1. <div class="div-c"> 
  2. <div class="div-a"></div> 
  3. <div class="div-b"></div> 
  4. </div> 

完整DIV+CSS代码：

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>DIVCSS5案例</title> 
  6. <!-- www.divcss5.com --> 
  7. <style type="text/css"> 
  8. .div-c{width:200px;} 
  9. .div-a{ float:left; width:50px; border:1px solid #999; height:60px;} 
  10. .div-b{ float:right; width:120px; border:1px solid #999; height:60px;} 
  11. </style> 
  12. </head> 
  13. <body> 
  14. <div class="div-c"> 
  15. <div class="div-a"></div> 
  16. <div class="div-b"></div> 
  17. </div> 
  18. </body> 
  19. </html> 

说明：
1、实现设置总宽度为200px的(div-c)，左右DIV使用了float:left左浮动（局左）和float:right右浮动（局右），分别设置边框和宽度
2、这里设置左右DIV块(即div-a和div-b)总宽度+边框小于总宽度(即div-c对象宽度)

五、总结   -   TOP

设置DIV之间距离无论对象之间有一定距离还是没有距离，我们都需要CSS初始化，并且有距离地方还需要计算宽度，遵循这条死定律 设置宽度之和+边框(border)+margin+padding小于等于总宽度，不然会造成左右结构布局错位、其他比较的错误或有差异。

如有疑问请到DIVCSS5的CSS论坛讨论区发表您的问题我们将第一时间为你解答。

相关阅读：
CSS文字间距设置

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j231.shtml

分享到：
| Bootstrap里如何动态创建一个popover
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    巧妙利用overflow实现div间距例子

    巧妙利用overflow实现div间距.

    原生js div设置宽度_div设置背景颜色代码

    在CSS中，我们可以直接通过样式属性来设置`div`的宽度和背景颜色。但在JavaScript中，我们需要通过DOM（Document Object Model）来操作这些属性。 1. **设置宽度**： 在JavaScript中，我们使用`style.width`属性来...

    用margin和overflow属性实现div间距的方法

    1. **设置div的margin**：给每个div设置`margin-right`和`margin-bottom`属性，这样div之间就会出现间距。 ```css .box { margin-right: 10px; /* 右侧间距 */ margin-bottom: 10px; /* 底部间距 */ } ``` ...

    JavaScript设置Div的margin参数

    JavaScript 设置 Div 的 margin 参数 在 HTML 中，我们经常需要设置元素的样式，包括 margin 属性。margin 属性用于设置元素的外边距，而 JavaScript 可以帮助我们动态地设置元素的 margin 属性。 margin 属性可以...

    div设置宽度背景颜色js代码.zip

    综上所述，"div设置宽度背景颜色js代码"涉及的核心知识点包括：JavaScript操作DOM元素、修改元素样式、事件处理以及可能的动画效果。这些技能是前端开发中的基本功，对于构建动态、交互丰富的Web应用至关重要。

    DIV+CSS DIV居中布局

    通过设置`&lt;div&gt;`的样式，我们可以控制其在页面上的位置和外观。 在CSS中，居中布局通常涉及以下几种方法： 1. **margin auto**： 这是最常见的一种居中方法，适用于知道元素宽度的情况。设置`margin-left`和`...

    当div设置contentEditable=true时,重置其内容后无法光标定位

    最近在做一评论功能，需要能够评论表情，那 contentEditable 这个属性...var _div = document.querySelector('.discuss_area'); var range = document.createRange(); range.selectNodeContents(_div); range.collapse

    DIV可编辑模式在光标位置插入内容

    标题中的“DIV可编辑模式在光标位置插入内容”指的是在HTML中，使用`contenteditable`属性将一个`&lt;div&gt;`元素设置为可编辑区域，允许用户直接在该区域内输入或编辑文本。这个功能常用于富文本编辑器、在线文档编辑等...

    div滚动条 带滚动条的div div滚动条样式

    本篇文章详细介绍了 DIV 滚动条的样式设置，包括如何实现 DIV 滚动条、DIV 滚动条的样式设置和滚动条颜色属性。通过设置 `overflow` 属性和滚动条颜色属性，可以实现 DIV 元素的滚动条样式设置。

    div设置背景图片透明度且字不透明

    本文将详细解释如何使用CSS来设置`div`的背景图片透明度，同时保持文字的可见性。 首先，我们来看一个简单的例子。在这个例子中，我们有一个`div`元素，它有一个背景图片，并且我们希望调整背景图片的透明度。以下...

    DIV进阶效果集(圆角div、div自适应宽度、背景色渐变等）

    例如，若要将一个`div`的四个角都设置为10像素的圆角，我们可以这样编写CSS： ```css .rounded-div { border-radius: 10px; } ``` 接下来是`div`的自适应宽度。在响应式网页设计中，我们常常希望`div`能根据...

    鼠标移动到div上显示制定信息或者div（自适应显示位置）

    "info-div"则需要设置初始隐藏状态，以便在鼠标未悬停时不可见： ```css #hover-div { background-color: #f1f1f1; padding: 10px; border: 1px solid #ccc; } #info-div { position: absolute; /* 使div相...

    HTMl、js中设置div的透明度(非常实用)、div居中

    非常实用的页面制作，用于设置div的透明度，以及div在页面左右居中

    如何设置 div 的最小高度.docx

    设置 `div` 的最小高度是一项重要的任务，特别是在响应式设计或者内容动态填充的场景下。然而，在 Internet Explorer 6 (IE6) 这个古老的浏览器版本中，设置 `div` 最小高度会遇到一些特定的问题。 ### IE6 的默认...

    外部DIV如何强制宽度不被内部DIV撑开

    将外部`&lt;div&gt;`的`overflow`属性设置为`hidden`可以隐藏超出该`&lt;div&gt;`边界的内容，从而防止内部元素撑开外部`&lt;div&gt;`的宽度。这意味着，如果内部`&lt;div&gt;`的宽度超过外部`&lt;div&gt;`的宽度，超出的部分将被裁剪，而外部`&lt;div...

    div+css例子 div+css例子

    div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子div+css例子...

    Div块上下左右循环滚动

    在描述中提到的“可以在同一页使用多个移动块”，意味着可以创建多个具有滚动效果的Div，每个Div都可以独立设置其滚动速度、方向以及动画效果。通过类（Class）的设计模式，我们可以将这些效果封装在独立的函数或...

    js设置浮动div的特效

    在这个场景中，"js设置浮动div的特效"指的是使用JavaScript来操控浮动的`div`元素，以实现更复杂的视觉表现。 首先，我们需要理解CSS中的`div`和`float`属性。`div`是HTML中的一个通用容器元素，常用来组织页面结构...

    拖动div到另一个div中

    1. **定义可拖动元素**：首先，我们需要设置一个div元素为可拖动。这可以通过在HTML中添加`draggable="true"`属性来实现。例如： ```html &lt;div id="draggableDiv" draggable="true"&gt;拖动我&lt;/div&gt; ``` 2. **监听...

    div弹出层 定位问题的 处理

    在实现弹出层时，我们通常将`div`设置为绝对或固定定位，使其能脱离文档流，独立于其他元素显示。 1. **绝对定位**：使用`position: absolute;`可以让`div`相对于最近的非静态定位祖先元素进行定位。如果没有这样的...

Magicbox
Global site tag (gtag.js) - Google Analytics