Question

我的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

上找到

Answer 1

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

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

Answer 2

使div像菜单一样浮动。

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

也许你可以添加padding-left 10px

div左侧不需要的空间

2 个答案: