gpt4 book ai didi

html - CSS 边距无法正常工作

转载 作者:行者123 更新时间:2023-11-28 16:13:19 25 4
gpt4 key购买 nike

有人可以告诉我,为什么我不能将 margin-top/bottom 或 padding-top/bottom 添加到这个“a”标签。我需要在标题框中设置“Konoha”

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;
}
<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>

谢谢所有问题都解决了,但现在我有一个新问题。

  1. 为什么我不能只使用 margin-top:50%margin:bottom:50%上课.logo.right据我所读margin:bottom:50%margin-top:50%应自动垂直居中 .right.logo在他们的容器中 header而是他们来到页面的某个随机中间位置

2.如果我使用margin-top:x%然后当我将窗口大小调整为小时, Logo 从 header 的中间移动。到顶部。

最佳答案

因为 margin-top/bottom 或 padding-top/bottom 只适用于 block 元素
但是<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%;
}

关于html - CSS 边距无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38024946/

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