html/css中元素中间的顶部0px位置？_Html_Css

html/css中元素中间的顶部0px位置？

html css

html/css中元素中间的顶部0px位置？,html,css,Html,Css,试图创建一个基本标题，但在用户登录元素中定位文本时遇到问题 html: 为什么登录属性中的top 0px将文本“Test”定位在用户登录元素的中间位置？似乎我错误地将元素的顶部设置为中间的某个位置，请帮助这是因为p元素的默认边距。因为标记是块级元素。您可以在css中应用display:inline将其更改为inline-element。请将其缩小到一个最小的示例。@yalight块元素有什么问题？它们也可以是绝对定位的……元素的百分比高度是其容器高度的百分比。例如，搜索栏的高度是标题的2.75%

试图创建一个基本标题，但在用户登录元素中定位文本时遇到问题

html:

为什么登录属性中的top 0px将文本“Test”定位在用户登录元素的中间位置？似乎我错误地将元素的顶部设置为中间的某个位置，请帮助这是因为p元素的默认边距。

因为标记是块级元素。您可以在css中应用display:inline将其更改为inline-element。请将其缩小到一个最小的示例。@yalight块元素有什么问题？它们也可以是绝对定位的……元素的百分比高度是其容器高度的百分比。例如，搜索栏的高度是标题的2.75%，是视口的10%。如果视口为800px，则搜索栏为2.2pxa。修复错误的好方法是在所有元素周围放置边框。在css中添加

*{border:solid 1px red；}

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="home_style.css">
    </head>
    <body>
        <div class="header">
        <div class="search_bar">
        <input type="text" name="search" placeholder="Search magical instruments, tricks, books and more">
            </div>
            <div class="user_settings">
                <a href="settings.html"><img src="onebit_09.png" width="24px" height="24px"></a>
            </div>
            <div class="user_login">
                <p class="login_properties">Test</p>
            </div>
        </div>
    </body>
</html>

html,body {
    height     : 100%;
    min-height : 100%; 
    width      : 100%
    min-width  : 100%;
    margin     : 0;
    padding    : 0;
}

.header {
    margin-top       : 0;   
    margin-bottom    : 0;
    height           : 10%; 
    width            : 100%;
    background-color : #343430;
}

.search_bar input[type="text"] {
    position            : absolute; 
    left                : 20%;
    top                 : 5%;
    width               : 27%;
    height              : 2.75%;
    padding             : 5px;
    padding-right       : 50px;
    outline             : none;
    border              : 2px solid #9C4B8F;
    border-radius       : 5px;
    background-color    : #FBFBFB;  
    font-family         : Cambria, Cochin, Georgia, serif;
    font-size           : 16px;
    color               : grey;
    background-image    : url('search.png');
    background-position : 100% -10px;
    background-repeat   : no-repeat;
    margin-top          : -1.375%;
}

.search_bar input[type="text"]:focus {
    background-color : #FFFFFF;
    border-color     : #333333;
}

.user_login {
    position         : absolute;
    left             : 70%;
    top              : 5%;
    width            : 5%;
    height           : 2.75%;
    padding          : 5px;
    margin           : -1.375% 0 0 -2.5%;
    color            : white;
    background-color : #9C4B8F;
    border-radius    : 5px;
}

p.login_properties {
    position : absolute;
    height   : 50%;
    width    : 75%;
    top      : 0px;
}

.user_settings img {
    position : absolute;
    top      : 5%;
    left     : 95%;
    height   : 48px;
    width    : 48px;
    margin   : -24px 0 0 -24px;
}