html - 删除两个 div 之间的空白

标签 html css

<分区>

如何删除 headerwrapper div 之间的空白。

这是一个DEMO fiddle . 这是 HTML 代码:

 <div id="container">
    <div id="header">
        <div id="logo">
        </div>
        <div id="login">
            <h3>
                CLIENT LOGIN</h3>
            Username
            <input type='text' name='username' id='username'>
            <input type='button' name='login' value='Login' id='btnLogin'>
            <br />
            Password:
            <input type='password' name='password' id='password'>
            <input type='button' name='register' value='Register' id='btnRegister'>
        </div>
        <div id="navigation">
            <ul>
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">Profile</a></li>
                <li><a href="#">Contact</a></li>
                <li><a href="#">Group</a></li>
                <li><a href="#">Seminar</a></li>
            </ul>
        </div>
    </div>
    <div id="wrapper">
        <div id="contents">
            <div id="welcome">
                <h3>
                    Welcome to Somara</h3>
                <p>
                    It is a long established fact that a reader will be distracted by the readable content
                    of a page when looking at its layout.</p>
                <p>
                    There are many variations of passages of Lorem Ipsum available.</p>
            </div>
        </div>
    </div>
    <div id="footer">
    </div>
</div>

这是CSS代码:

    body
{
    width:100%;
    margin:0px;
}

#header
{
    width: 100%;
    background-color: #2c2520;
    min-height: 200px;
}
#login
{
    float: right;
    color: white;
}
#logo
{
    background-image: url('../img/logo.png');
    min-height: 191px;
    min-width: 230px;
    float: left;
    background-repeat: no-repeat;
}
#navigation
{
    padding-top: 158px;
    margin-right: -200px;
    float: right;
}
#navigation li
{
    display: inline;
    min-width: 100px;
    padding: 5px 5px 5px 5px;
}

#navigation a
{
    text-decoration: none;
    font-family: Tahoma, calibri;
    font-size: 15px;
    color: #f8f8f8;
}
.active
{
    background-color: #afaba5;
    color: black;
}

.inactive
{
    color: white;
    background-color: #392f2b;
}

#contents
{
    width: 950px;
    margin: 0px;
    min-height: 700px;


}

#wrapper
{
    width: 100%;
    margin: 0 auto;
    background-color: #39302b;
}


#intro1
{
    min-width: 30%;
    max-width: 35%;
    min-height: 250px;
    float: left;
    padding: 10px;
    padding-right: 50px;
    padding-left: 50px;
    color: #cdcdcd;
}

#welcome
{

}

#welcome h3, p
{
    font-family: Myriad Pro;
    color: white;
    text-align: center;
    font-weight: normal;
}

#welcome p
{
    color: #cdcdcd;
    font-size: 20px;
}

最佳答案


#welcome h3 中移除 margin

#welcome h3, p {
font-family: Myriad Pro;
color: white;
text-align: center;
font-weight: normal;
margin: 0;
}

link

关于html - 删除两个 div 之间的空白,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28209138/

上一篇:javascript - 带有单词/文本关闭按钮的面板

下一篇:javascript - 创建一个三 Angular 形以防止内部内容溢出

相关文章:

html - 根据父元素中的计数设置子元素的样式

javascript - 计算添加的输入字段中的 TOTAL

javascript - 非原生滚动

html - 设置div高度为窗口高度

javascript - css:在 Chrome 中为打印页面编号

javascript - 如何将输入栏推开另一个?

html - 当另一个元素改变大小时如何避免html页面中的元素移动

HTML 按钮作为换行复制到剪贴板

html - 背景图像缩放代码破坏 html 放置

javascript - jQuery:根据下拉选择显示div