Почему тег <hr>занимает пробел, а не цвет фона - PullRequest
Новая
       211

Почему тег <hr>занимает пробел, а не цвет фона

0 голосов
/ 07 августа 2020

Тег hr занимает пустое пространство, а не цвет фона - я пытался решить, но не смог. 

.top {
  position: relative;
  padding-top: 100px;
  background-color: #cbf1f5;
}

.mid {
  text-align: center;
  background-color: #cbf1f5;
}

.bottom {}

.h1 {
  font-family: 'Sacramento', cursive;
  text-align: center;
}

.firstP {
  text-align: center;
}

.TopCloud {
  position: absolute;
  right: 250px;
  top: 50px;
}

.BottomCloud {
  position: absolute;
  left: 240px;
}

h2 {
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-family: 'Roboto', sans-serif;
}

p {
  font-family: 'Roboto', sans-serif;
}

hr {}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Abdullatif Albahar</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
</head>

<body>



  <div class="top">
    <img class="TopCloud" src="images/cloud.png" alt="Cloud">
    <h1 class="h1">Abdullatif Albahar</h1>
    <p class="firstP">A Web Developer</p>
    <img class="BottomCloud" src="images/cloud.png" alt="Cloud">
    <br><br><br><br><br>
  </div>
  <hr>
  <div class="mid">
    <div class="profile">

      <img class="moon" src="images/real moon.png" alt="Me">
      <h2>Hi.</h2>
      <p>I am Abdullatif, and I am a beginner Full Stack Web Developer.</p>
    </div>
    <hr>
    <div class="skills">
      <h2>My Skills.</h2>
      <div class="skill row">
        <img class="web dev" src="images/web dev.png" alt="">
        <h3>Web Development</h3>
        <p>.</p>
      </div>
      <div class="skill row 2">
        <img class="web design" src="images/web design.png" alt="">
        <h3>Web Design</h3>
        <p>.</p>
      </div>
    </div>
    <hr>
    <div class="contact me">
      <h2>Get In Touch</h2>
      <h3>Lorem ipsum dolor sit amet, non elit.</h3>
      <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
      <a class="button" href="mailto:name@email.com">Contact Me</a>
    </div>
  </div>


  <div class="bottom-container">
    <!--make instagram & Twitter accounts for business-->
    <!-- add links -->
    <a class="footer-link" href="">Instagram</a>
    <a class="footer-link" href="">Fiverr</a>
    <a class="footer-link" href="">Freelancer</a>
    <a class="footer-link" href="">Upwork</a>
    <a class="footer-link" href="">Toptal</a>
    <a class="footer-link" href="">Truelancer</a>
    <p>© 2020 Abdullatif Albahar.</p>
  </div>

</html>

Ответы [ 3 ]

3 голосов
/ 07 августа 2020

удалите margin из hr

.top {
  position: relative;
  padding-top: 100px;
  background-color: #cbf1f5;
}

.mid {
text-align: center;
background-color: #cbf1f5;
}

.bottom {

}

.h1 {
  font-family: 'Sacramento', cursive;
  text-align: center;
}

.firstP {
  text-align: center;
}

.TopCloud {
  position: absolute;
  right: 250px;
  top: 50px;
}
.BottomCloud{
  position: absolute;
left: 240px;
}
h2{
  font-family: 'Roboto', sans-serif;
}

h3{
  font-family: 'Roboto', sans-serif;
}

p {
  font-family: 'Roboto', sans-serif;
}
hr{

}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>Abdullatif Albahar</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Sacramento&display=swap" rel="stylesheet">
</head>

<body>



  <div class="top">
    <img class="TopCloud" src="images/cloud.png" alt="Cloud">
    <h1 class="h1">Abdullatif Albahar</h1>
    <p class="firstP">A Web Developer</p>
      <img class="BottomCloud" src="images/cloud.png" alt="Cloud">
    <br><br><br><br><br>
</div>
<hr style="margin:0;">
  <div class="mid">
    <div class="profile">

      <img  class="moon"src="images/real moon.png" alt="Me">
      <h2>Hi.</h2>
      <p>I am Abdullatif, and I am a beginner Full Stack Web Developer.</p>
    </div>
    <hr class>
    <div class="skills">
      <h2>My Skills.</h2>
      <div class="skill row">
        <img class="web dev" src="images/web dev.png" alt="">
        <h3>Web Development</h3>
        <p>.</p>
      </div>
      <div class="skill row 2">
        <img class="web design" src="images/web design.png" alt="">
        <h3>Web Design</h3>
        <p>.</p>
      </div>
    </div>
    <hr>
    <div class="contact me">
      <h2>Get In Touch</h2>
      <h3>Lorem ipsum dolor sit amet, non elit.</h3>
      <p>Lorem ipsum dolor sit amet, in quis, aenean amet. Phasellus sodales, tellus donec dui, ornare erat.</p>
      <a class="button" href="mailto:name@email.com">Contact Me</a>
    </div>
  </div>


  <div class="bottom-container">
    <!--make instagram & Twitter accounts for business-->
    <!-- add links -->
    <a class="footer-link" href="">Instagram</a>
    <a class="footer-link" href="">Fiverr</a>
    <a class="footer-link" href="">Freelancer</a>
    <a class="footer-link" href="">Upwork</a>
    <a class="footer-link" href="">Toptal</a>
    <a class="footer-link" href="">Truelancer</a>
    <p>© 2020 Abdullatif Albahar.</p>
  </div>

</html>
0 голосов
/ 07 августа 2020

Это происходит потому, что тег <hr> имеет значение по умолчанию CSS.

Тег <hr> занимает пробел, а не цвет фона, потому что первый тег <hr> находится за пределами div, поэтому фон CSS не применяется к ним.

Для решения этой проблемы у вас есть два решения: Первое: добавить css margin:0; в тег <hr> Второй: добавить обертку div и применить background-color CSS к этому div

0 голосов
/ 07 августа 2020

Свойство CSS margin по умолчанию используется для добавления пробела вокруг тега hr. Мы должны перезаписать значение поля CSS, чтобы удалить пробелы. Пожалуйста, включите в свой стиль ниже CSS: - 

hr{ margin:0px;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...