HTML末尾的空白_Html_Css_Whitespace_Margin

HTML末尾的空白

html css

HTML末尾的空白,html,css,whitespace,margin,Html,Css,Whitespace,Margin,我试图做一个动态的网格布局与其他网页的链接，包括图片和文本。问题是我似乎找不到任何方法在网格布局之后引入空白（填充/边距）。换句话说，页面正好在主div结束的地方结束这是代码。非常感谢您的帮助，因为我已经尝试了很多方法，但都没有成功。非常感谢 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="text

我试图做一个动态的网格布局与其他网页的链接，包括图片和文本。问题是我似乎找不到任何方法在网格布局之后引入空白（填充/边距）。换句话说，页面正好在主div结束的地方结束

这是代码。非常感谢您的帮助，因为我已经尝试了很多方法，但都没有成功。非常感谢

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <link rel="stylesheet" type="text/css" media="screen" href="resources/index.css" /> 
</head>

<body>

    <div class="header"></div>

        <div class="body">

                             <!-- this is the standard link to each category, which will be inserted n times .. the problem is visible after inserting it a min of 12 times-->
            <a href="" class="categorie">
                    <img src="imgs/asd.png" class="imagine"/>
                <div class="nume">  </div>
            </a>            

        </div>

</body>

</html>

我不确定body元素上为什么会有display:table，您说：

因为我在.body类中使用position:absolute。否则，.body将不会扩展以封装所有链接

因此，我可以通过从body元素中删除display:table和从body类中删除position:absolute，然后在body类中添加overflow:auto来解决这两个问题

CSS：

body{
  padding:20px;
  margin: 0 auto;  
  height:100%;
}
.body, .body>html {
  background-color:black;
  width:700px;
  margin-top:5px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  padding-bottom:20px;
  display:block;
  height:auto;
  overflow: auto;
}

JSFIDLE：

我不清楚body元素上为什么会有display:table，你说：

因为我在.body类中使用position:absolute。否则，.body将不会扩展以封装所有链接

因此，我可以通过从body元素中删除display:table和从body类中删除position:absolute，然后在body类中添加overflow:auto来解决这两个问题

CSS：

body{
  padding:20px;
  margin: 0 auto;  
  height:100%;
}
.body, .body>html {
  background-color:black;
  width:700px;
  margin-top:5px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:20px;
  padding-bottom:20px;
  display:block;
  height:auto;
  overflow: auto;
}

JSFIDLE：

这里有一个可行的解决方案，以防出于某种原因，您希望保持body table的显示。

第一次改变

.body、.body>html
{
位置：绝对位置；
}

到

.body/*删除.body>html没有改变任何东西，这意味着它是无用的*/
{
浮动：左；
}

这样，您将能够使用clearfix div清除浮动（好像正确地相对定位），并且如果您保持clearfix div透明，您给它的高度将用作“边距”

在

之后添加

，并为clearfix提供此CSS：

#clearfix{
高度：20px；
宽度：100%；
位置：相对位置；
明确：两者皆有；
}

编辑：Artsen的答案也有效，如果您不需要保留

.body{display:table}

，他的答案更合适。

这里有一个可行的解决方案，以防出于某种原因，您希望保留body表的显示。

第一次改变

.body、.body>html
{
位置：绝对位置；
}

到

.body/*删除.body>html没有改变任何东西，这意味着它是无用的*/
{
浮动：左；
}

这样，您将能够使用clearfix div清除浮动（好像正确地相对定位），并且如果您保持clearfix div透明，您给它的高度将用作“边距”

在

之后添加

，并为clearfix提供此CSS：

#clearfix{
高度：20px；
宽度：100%；
位置：相对位置；
明确：两者皆有；
}

EDIT:Artsen的答案也有效，如果您不需要保留

.body{display:table}

，他的答案更合适。

您为什么要对

元素使用

display:table

，因为我在.body类中使用position:absolute。。否则，.body将不会扩展以封装所有链接。您为什么要对

元素使用

display:table

。。否则，.body将不会扩展以封装所有链接.Sweet。。这正是我所需要的。非常感谢你的帮助：）太好了。。这正是我所需要的。非常感谢您的帮助：）