在 html/css 中定位项目

Question

我正在尝试使用 jfiddle 学习 HTML 的一些基础知识。这就是我所做的。

HTML

<body>
    <div class="container">
        <div class="sidebar">
            <div class="logo"></div>
            <div class="menu-options">
                <p>yeeeeeep</p>
            </div>
        </div>
    </div>
</body>

CSS

html, body {
    height: 100%;
    overflow-y: hidden;
}
.container {
    background-color : #458748;
    height: 100%;
}
.sidebar {
    height: 100%;
    width: 30%;
    background-color : #000000;

}
.logo {
    background-image: url("https://upload.wikimedia.org/wikipedia/en/thumb/3/31/Britannia_Industries_Logo.svg/1280px-Britannia_Industries_Logo.svg.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    height: 30%;
    width: 100%;
    text-align: center;
    background-color: aqua;


}
.menu-options {
    background-color: #FFFFFF;
}
p {
    color: #000000;
}

但是我不明白为什么我的 'menu-options' class 没有被定位在徽标的正下方并且它们之间有一些分隔。

提前致谢。

Answer 1

这是你想要的吗？

https://jsfiddle.net/Lqn0jch3/1/

我改变了p

的css

p {
    display: inline-block;
    color: #000000;
}

默认情况下，元素 <p> 成为边距，因此更改其显示或设置 margin: 0px; 即可完成这项工作

Answer 2

我已经改变了你的class，根据你的需要修改定位：

.menu-options {
    background-color: #FFFFFF;
    position:relative;
    top:-20px;
}

Answer 3

默认情况下，浏览器会在段落元素的顶部和底部添加边距，因此要解决此问题，您只需将边距更改为 0。

p {
    margin: 0;
}

而且您通常不会在菜单中使用段落元素。无序列表效果很好。 <ul> <li>

Answer 4

它们之间的分离是因为元素 p 的默认边距样式

您可以在不同的浏览器上获得不同的默认边距值，请尝试使用 CSS 重置脚本。

在 html/css 中定位项目

positioning items in html/css

html

css

position