div 左侧不需要的空间答案

【问题标题】：Unwanted space on left side of divdiv 左侧不需要的空间
【发布时间】：2014-05-26 22:58:32
【问题描述】：

在我的 div 的左侧与其内部的实际内容（文本、图像）之间存在不必要的间隙。我将类的边距和填充都设置为 0px。 div 也在我的导航栏旁边，这可能会以某种方式影响间距。

body
{
    background-color: #f5f5f7;
    background-image: url("../img/powder.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: right bottom;
    font-family: 'Lora', serif;
    padding: 0px;

}

.main /* the extra space is occuring in this class */
{
    position: relative;
    left: 200px;
    width: 800px;
    height: 400px;
    text-align: left;
    border-radius: 10px;  
    padding-left: 0px;
    margin: 0px;
    background-color: rgba(207, 207, 207, 0.5);
}

nav ul 
{
    background: #efefef; 
    background: linear-gradient(to right, #d3c965 0%, #89822a 100%);  
    background: -moz-linear-gradient(left, #d3c965 0%, #89822a 100%); 
    background: -webkit-linear-gradient(left, #d3c965 0%,#89822a 100%); 
    background: -o-linear-gradient(left, #d3c965 0%, #89822a 100%);  
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
    padding: 0px 20px;
    border-radius: 10px;  
    list-style: none;
/*  display: inline-table;*/
    margin: 0px;
}


nav ul li:hover 
{
    background: linear-gradient(to right, #993300, #4C1A00); /*Standard syntax */
    background: -moz-linear-gradient(left, #993300, #4C1A00);/* For Firefox 3.6 to 15 */
    background: -webkit-linear-gradient(left, #993300, #4C1A00);/* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(left, #993300, #4C1A00); /* For Opera 11.1 to 12.0 */
}

nav ul li:hover a 
{
    color: #fff;
}

nav ul li a 
{
    display: block; 
    padding: 25px 40px;
    color: #4C4C4C; 
    text-decoration: none;
    margin: 0px;
}

可以在 msu.edu/~bridsonc/henna 上找到它的实时版本

【问题讨论】：

您是否尝试过使用 Chrome 的开发者工具之类的工具查看页面？以我的经验，这是解决此类问题的最简单方法。
尝试将您的 .main 设置为 position: absolute;或者更好的是，像菜单一样向左浮动。

标签： html css nav spacing

【解决方案1】：

让 div 像菜单一样浮动。

.main {
    float: left
    /* change left:200px to margin-left:20px */

也许您可以添加 padding-left 或 10px

【讨论】：

【解决方案2】：

将 div 的位置从相对位置更改为固定位置：

.main /* the extra space is occuring in this class */
{
    position: fixed;

【讨论】：