Я пытался скомпоновать свой первый шаблон, и я столкнулся с проблемой. Я пытаюсь переместить ссылку (home/") с функцией поля, но она не перемещается. Но в других текстах я могу перемещаться с запасом. Так почему я не могу переместить некоторые тексты с функцией маркера?
body {
margin:0;
padding:0;
}
#header {
background-color:#353C3E;
height:80px;
width:100%;
position:relative;
}
.header_content {
width:946px;
position:relative;
margin:0 auto;
padding:0;
}
.header_content p:nth-child(2) {
margin:-63px 0 0 100px;
position:relative;
font-size:24px;
color:#FFF;
font-family:Montserrat;
}
.header_content p:nth-child(3) {
margin:-21px 0 0 564px;
position:relative;
font-size:13px;
color:#959595;
font-family:Montserrat;
}
#header2 {
width:100%;
background-color:#40494C;
height:62px;
}
.header_content a {
font-family:Montserrat;
color:#717B7E;
font-size:13px;
margin-top:10px;
text-decoration:none;
}
.header_content a:hover {
color:#FFF;
font-size:13px;
text-decoration:none;
}
@font-face {
font-family:Montserrat;
src: url('Montserrat-Regular.ttf');
}
<!DOCTYPE html>
<html>
<head>
<title>Webpage</title>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
</head>
<body>
<div id="header">
<div class="header_content">
<img src="img/near-logo.png"/>
<p>ILLUSTRATE.</p>
<p><i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</i></p>
</div>
</div>
<div id="header2">
<div class="header_content">
<div class="link">
<a href="">HOME/</a>
</div>
</div>
</div>
</body>
</html>
Встроенные элементы не имеют высоты, поэтому вы можете изменить отображение из строки в встроенный блок, чтобы можно было использовать высоту или верхний край вашего окна:
.header_content a {
font-family:Montserrat;
color:#717B7E;
font-size:13px;
margin-top:10px;
text-decoration:none;
display:inline-block;
}
HOME
является inline
элементом.Согласно спецификации CSS2.1:
8.3 Свойства полей: "margin-top", "margin-right", "margin-bottom", "margin-left" и "margin"
Свойства поля определяют ширину области поля поля. Условное свойство "margin" устанавливает маржу для всех четырех сторон, в то время как другие свойства поля только устанавливают соответствующую сторону. Эти свойства применимы ко всем элементам, но вертикальные поля не будут влиять на незаменяемые встроенные элементы.
Если вы хотите, чтобы верхний (и нижний) край был применен, измените его на inline-block
или используйте position:relative
с top
набором.
Прежде всего, если это меню, которое вы используете, я бы использовал UL, а не DIV. Поэтому я немного структурировал это, чтобы посмотреть, нравится ли вам это
ul.header_content {
display:block;
padding-top:15px;
padding-left:15px;
}
ul.header_content li {
display:inline;
margin:0px 10px;
}
Вот ДЕМО
display:inline-block;
для них я используюzoom: 1;
и*display: inline;