zoukankan      html  css  js  c++  java
  • 边距叠加

    css排版时出现:里面的div设置margin-top值时外面div会向下移动相应距离的解决方法

      先看一简单实例:
    <div id="box">
    <p>这是一个段落</p>
    </div>

    然后设置样式

      #box { margin: 10px; background-color: #999; }

      p { background-color: #990; margin: 20px; }


      理论上在p段落和div之间会出现20px的空白边,因为已经设置p标签的margin样式但实际上没有。

    这里有两种情况:首先,段落的20像素顶空白边和底空白边与div的10像素空白边叠加,形成一个单一的20像素垂直空白边。其次,这些空白边不是div包围,而是突出到div的顶部和底部的外边。出现这种情况是由于具有块级子元素的元素计算高度的方式造成的。

    如果元素的没有垂直边框和填充,那么它的高度就是它包含的子元素的顶部和底部边框边缘之间的距离。 因此,包含的子元素的顶部和底部空白边就突出到容器元素的外边。但是,有一个简单的解决方案。通过添加一个垂直边框和填充,空白边就不再叠加了,而且元素的高度就是它包含的子元素的顶部和底部空白边边缘之间的距离。

    在上面的例子中可以将box加一个padding:1px;样式;

  • 相关阅读:
    编写属于自己的Linux Service命令
    Cloudera Manager和CDH4.1的安装
    html5基础教程收集整理精华
    Javascript跳转页面和打开新窗口等方法
    VK值列表
    标准C++之fstream
    PeekMessage用法
    Web系统常用测试方法
    VC控件的一些原理
    Visual C++ 文件操作
  • 原文地址:https://www.cnblogs.com/cyanqq/p/4645341.html
Copyright © 2011-2022 走看看