Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

作业3中的问题：在Navigation和后面的内容之间多出很细（大概1px多）的一行空白 #14

Open
LiYingwei opened this issue Apr 22, 2015 · 5 comments
Open

作业3中的问题：在Navigation和后面的内容之间多出很细（大概1px多）的一行空白 #14

LiYingwei opened this issue Apr 22, 2015 · 5 comments

Comments

@LiYingwei
Copy link

在Navigation和后面的内容之间多出很细（大概1px多）的一行空白，无法消除，即使把padding调成0也不行。
2015-04-22 10 47 56
index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'/>
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">
        <img id="logo" src="Logo.gif" />
        <img id="search" src="Search.gif" />
        <img id="nav" src="Navigation.gif" />
        <img id="pic" src="pic.gif" />
        <img id="text" src="Text.gif" />
        <img id="fooer" src="Footer.gif" />
    </div>
</body>

index.css

#wrapper{
    width:720px;
    margin: 0 auto 0 auto;
}
#logo{
    float:left;
}
#search{
    float:right;
    margin-top:50px;
}
#nav{
    clear:both;
    padding-top:10px;
    padding-bottom:10px;
}
#pic{
    float:left;
    /*padding-top:10px;*/
    padding-right:10px;
}
#text{
    float:right;
    padding-bottom:10px;
}
#footer{
    float:right;
}
@quillblue
Copy link

在computed标签栏里检查下，多半是浏览器自设的margin

@LiYingwei
Copy link
Author

我明白了
在这里加上float:left就可以了

#nav{
    float:left;
    clear:both;
    padding-top:10px;
    padding-bottom:10px;
}

@shuding
Copy link
Member

shuding commented Apr 22, 2015

因为 inline-block 之间会常常莫名其妙产生一个 4px 的 margin，参见：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

不过上面链接的办法（去掉空白符）只能解决 inline-block 和水平元素间的 4px margin，无法解决垂直元素间的间距。设置成 float: left 和 display: block 都是可以的解决办法。

不过！一劳永逸的解决办法是把这些 inline-block 的父元素的 font-size 设置为 0，这样一来所有换行、空格都是 0 宽度的了。

@shuding
Copy link
Member

shuding commented Apr 22, 2015

Demo: https://jsfiddle.net/shuding/91uLuLoy/

@LiYingwei
Copy link
Author

谢谢戍爷！

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@quillblue @shuding @LiYingwei