我无法删除段落上方和下方的空格答案

【问题标题】：I can't remove the space above and below a paragraph我无法删除段落上方和下方的空格
【发布时间】：2021-05-07 15:00:19
【问题描述】：

我无法删除网页顶部仅包含字母“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>

【问题讨论】：

标签： html css padding margin line-height

【解决方案1】：

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

 p {
margin: 0;
padding: 0;
 }

或者像这样删除边距和填充

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

【讨论】：

【解决方案2】：

你可以这样做 ->

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

my 代表上边距和下边距， py 代表 padding top padding top 和 padding bottom

【讨论】：

【解决方案3】：

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

p {
margin: 0;
padding: 0;

}

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

【讨论】：

嗨，John，我刚刚在 .initial 中添加了“padding-top”和“padding-bottom”，但它根本没有改变。谢谢
您可以将 !important 用于 padding-top 或 margin-top 谢谢

【解决方案4】：

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

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

【讨论】：