gpt4 book ai didi

html - 无法移动带边距的文本

转载 作者:太空宇宙 更新时间:2023-11-04 03:57:42 24 4
gpt4 key购买 nike

我在尝试编写我的第一个模板时遇到了问题。我正在尝试使用边距功能移动我的链接 (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>

最佳答案

内联元素没有高度,因此您可以将显示从内联更改为内联 block 以允许高度(或者在您的情况下为上边距)起作用:

.header_content a {
font-family:Montserrat;
color:#717B7E;
font-size:13px;
margin-top:10px;
text-decoration:none;
display:inline-block;
}

jsFiddle example

关于html - 无法移动带边距的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22560828/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com