Question

我想知道如何减少文本之间的宽度，以便文本排列如下，如下例所示。看看文字＆＃34;欢迎来到我的portolfio＆＃34;。 http://christopherc.ca

到目前为止，这是我的代码，你可以看到＆＃34;欢迎来到我的＆＃34;之间的巨大差距。和＆＃34;投资组合＆＃34;当你运行它时。

以下是我的HTML

<h1 class="title4">WELCOME TO MY</h1>
<h1 class="title5">PORTFOLIO</h1>

以下是我的CSS

.title4 {
text-align:middle;
font-family:Arial;
color:white;
font-size:45pt;
text-align:center;
}
.title5 {
text-align:middle;
font-family:Arial;
color:white;
font-size:45pt;
text-align:center;
}

亲切的问候，小连

Answer 1

为您的班级添加margin: 0;。

还值得一提的是你有多少重复的东西。 title4和title5之间没有区别。为什么不让他们成为同一个班级？

body {
  background-color: black;
}


.title {
  text-align:middle;
  font-family:Arial;
  color:white;
  font-size:45pt;
  text-align:center;
  margin: 0;
}

<html>
    <body>
       <h1 class="title">WELCOME TO MY</h1>
       <h1 class="title">PORTFOLIO</h1>
    </body>

</html>

Answer 2

试试这个

.title4 {
text-align:middle;
font-family:Arial;
color:red;
font-size:45pt;
text-align:center;
margin-bottom:0px;
}
.title5 {
text-align:middle;
font-family:Arial;
color:red;
font-size:45pt;
text-align:center;
margin-top: 0px
}

Answer 3

你提到宽度，人们一直在提供调整两个标题之间差距的方法。您还可以更改字母之间的间距。

如果您将letter-spacing: 2px;添加到＆＃34; PORTFOLIO的h1，您可以扩展字母之间的空格，以便PORTFOLIO更好地匹配＆＃34; WELCOME TO MY＆＃34;的宽度。在我使用您的代码的示例中，我添加了5px以更好地演示效果。

＆＃13;

body {
  background-color: black;
}


.title {
  text-align:middle;
  font-family:Arial;
  color:white;
  font-size:45pt;
  text-align:center;
  margin: 0;
}
.title2 {
  text-align:middle;
  font-family:Arial;
  color:white;
  font-size:45pt;
  text-align:center;
  margin: 0;
  letter-spacing: 5px;
}

＆＃13;

<html>
    <body>
       <h1 class="title">WELCOME TO MY</h1>
       <h1 class="title2">PORTFOLIO</h1>
    </body>

</html>

＆＃13;

Answer 4

body {
  background-color: black;
}

.title4 {
  font-family: Arial;
  color: white;
  font-size: 45pt;
  text-align: center;
  margin: 0px;
}
.title5 {
  font-family: Arial;
  color: white;
  font-size: 45pt;
  text-align: center;
  margin: 0px;
}

<html>
  <head>
  </head>
  <body>
    <h1 class="title4">WELCOME TO MY</h1>
    <h1 class="title5">PORTFOLIO</h1>
  </body>
</html>

Answer 5

您可以通过添加以下内容来修改两个div之间的高度：

padding-top: -15px;

到你的.title5课程。这是上述变化的工作小提琴：https://jsfiddle.net/h6s7fg3m/1/

此外，请务必阅读填充和边距之间的差异，因为它们不同并且可以派上用场。

如何减少文本之间的宽度？

5 个答案: