Question

有人可以告诉我，为什么我不能在这个＆＃34; a＆＃34;上添加margin-top / bottom或padding-top / bottom。标签。我需要知道＆＃34; Konoha＆＃34;在标题框中

＆＃13;

html{
	background-color: white 
}


body{	
	width: 88.5%;
	height: 1200px; 
	margin: 0 auto;
	border: 2px solid black;
	background-color: #161e2c;
}

.top-box{
	margin:0 auto; 
	width: 99.5%;
	height: 153px;
	background-color: #314e59;
	border:1px solid rgb(211, 41, 97);
	box-shadow: 0px 10px 7.4px 2.6px rgba(0, 0, 0, 0.74);

}

a{
	display: inline-block;
	margin: 23px 0 0 5px;
	padding: 5px 5px;
	max-width: 400px;
	color: white;
	text-decoration: none;
	font-size: 500%;
	background-color:pink;
	border:2px solid black;
	
	
}

.right{
	margin-top:13;
	display: inline-block;
	width: 600px;
	background-color: pink;
	border:2px solid black;
	float: right;
	text-align:center;
	color:white
}

ul{
	display: inline-block;
	list-style-type: none;
	font-size:35px;
	width:100%;
	padding-left:0;

}

li{
	display:inline-block;
	padding:7px;
}

＆＃13;

<body>
	<header class = "top-box">
		<a href="#" class = "logo">Konoha</a>
		<div class = "right">
		<ul>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
			<li>Text</li>
		</ul>
		</div>
	</header>
 </body>

＆＃13;

谢谢所有这个问题都解决了，但现在我遇到了一个新问题。

为什么我只能在课程margin-top:50%和margin:bottom:50%上使用.logo和.right 根据我阅读的内容margin:bottom:50%和margin-top:50%应自动将.right和.logo垂直居中放置在其容器中header，而是他们来到一些随意的页面中间位置

2.如果我使用margin-top:x%，那么当我将窗口调整为较小时，LOGO会从header的中间位置移动到顶部。

Answer 1

因为margin-top / bottom或padding-top / bottom仅适用于 块元素
但<a></a>是 内联元素 。

您可以阅读Block formatting contexts

您可以尝试：

HTML代码

<body>
    <header class = "top-box">
        <div id = 'link'><a href="#">Konoha</a></div>
    </header>
</body>

CSS代码：

#link{
color: white;
text-decoration: none;
font-size: 100px;
margin-top: 50%;
margin-bottom: 50%;
}

Answer 2

如果您想使用inline element，

锚点为padding-top/bottom，你应该使用display:block添加锚标记

a{
color: white;
text-decoration: none;
font-size: 100px;
display:block
}

<强> readmore

Answer 3

尝试将标记设为块元素。添加此

display:block

在标签的CSS属性中。

或者在块元素中添加标记

CSS边距不正常

3 个答案: