1

我无法删除网页顶部仅包含字母“I”的段落上方和下方的空格。

我已经尝试使用“margin”和“padding”属性删除它，但它没有改变。我也尝试过，对于属性“line-height”，值 1 以便行高与文本的大小完全匹配，并且它也不起作用。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Came</title>
<link rel="stylesheet" media="screen" href="http://fontlibrary.org/face/kolar" type="text/css"/> 
<style>
        
body{
background-color:black;
color:white;}

.photo{
margin-top:0px;
margin-bottom:0px;
padding-top:0px;
padding-bottom:0px;
border:5px solid white;}

.initial{
font-size:500px;
line-height:1;
padding-top:0px;
padding-bottom:0px;

}

.main{
margin-top:0px;
margin-bottom:0px;}


h1{
font-family:KolarExtraBold;
font-size:20px;
border:solid 3px red;
width:65%;
margin: 0 auto;
margin-bottom:3px;}
</style>

</head>

<body>

<div class="photo">

<p class="initial">I</p>

</div>


<div class="main">
<h1><strong>CSS</strong> The Manual</h1>
</div>
</body>
</html>
4

4 回答 4

1

你可以简单地这样做 - >

<p class="initial my-0 py-0">I</p>

其中 my 代表上边距和下边距，py 代表上边距、上边距和下边距

于 2021-02-03T12:14:35.597 回答
1

标签从顶部和底部的默认边距为 1em。因此，您需要明确定义边距和填充都等于 0，这可以通过两种方式完成。 

 p {
margin: 0;
padding: 0;
 }

或通过像这样删除边距和填充

<p class="initial my-0 py-0">I</p>
于 2021-02-03T12:04:13.337 回答
0

元素通常有边距和/或填充。您可以在样式表中将它们设置为零。 

p {
margin: 0;
padding: 0;

}

然而，从语义上讲，拥有一个段落列表是相当不寻常的。

于 2021-02-03T11:26:39.137 回答
0

用户代理还为段落元素添加样式：

p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

您可以为元素添加规则p以删除此边距。

删除边距后，字母下方的 en 上方仍有空间。这是由于您设置的行高。此行高需要容纳不同的字母，因此在字母上方和下方留有空间是正常的。如果你只想要这个字母，并且在它的上下空间很小，你可以将行高设置为.655.

.initial {
    margin: 0;
    line-height: .655;
}
于 2021-02-03T12:08:57.490 回答