Question 44383 in Html Question posted in
Some basic documentation can be found here.

How to clear the unwanted space between the tags in this html?

CSS:

<style type="text/css">
    html, body {
border: 1px solid;
width: 210mm;
height: 297mm;
margin: 0;
padding: 0;
}
body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
 }
h1 {
  font-size: 36px;
  font-weight: bold;
  margin: 0;
 }
h2 {
  font-size: 24px;
  font-weight: bold;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.section {
  margin-bottom: 30px;
}
.section h2 {
  margin-top: 0;
}
.grid-container {
 display: grid;
 grid-template-columns: 40% 60%;
 }
.grid-item1{
    background-color: #0d315f;
    color: white;
    height: 297mm;
    padding-left: 20px;
}
.grid-item2{
    color:black;
    height: 297mm;
    padding-left: 20px;
}
.banner{
    padding-top: 10px;
    padding-bottom: 10px;
    font-weight: bold;
    background-color: #1d334f;
}
.bold{
    font-weight: bold;
}
.email{
    padding:0 !important;
    margin:0 !important;

}

HTML:

<div class="grid-container">
<div class="grid-item1">
      <section class="section">
        <h1>John<br>Doe</h1><br>
        Student
        <div class="banner">Personal Info</div>
        <p class="bold">Email</p> 
        <p>[email protected]</p>
        <p class="bold">Phone</p> 
        <p>7306219032</p>
      </section>

      <section class="section">
        <div class="banner">Skills</div>
        <ul>
          <li>CSS</li>
          <li>HTML</li>
          <li>PYTHON</li>
          <li>PHP</li>
          <li>C++</li>
        </ul>
      </section>

      <section class="section">
        <div class="banner">Hobbies</div>
        <ul>
          <li>Reading</li>
          <li>Watching Movies</li>
          <li>Cycling</li>
          <li>Music Listening</li>
          <li>Coding</li>
        </ul>
      </section>
      
 </div>
 <div class="grid-item2">

      <section class="section">
        <h2>Education</h2>
        <ul>
          <li>
            <h3>Degree Program</h3>
            <p><strong>University Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <p>GPA: X.XX/4.00</p>
          </li>
          <li>
            <h3>Degree Program</h3>
            <p><strong>University Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <p>GPA: X.XX/4.00</p>
          </li>
        </ul>
      </section>
      <section class="section">
        <h2>Experience</h2>
        <ul>
          <li>
            <h3>Job Title</h3>
            <p><strong>Company Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <ul>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
            </ul>
          </li>
          <li>
            <h3>Job Title</h3>
            <p><strong>Company Name</strong>, Location</p>
            <p><em>Date range</em></p>
            <ul>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
              <li>Accomplishment or responsibility</li>
            </ul>
          </li>
        </ul>
      </section>
    </div>
    </div>

There are unwanted space between p tags like email and the actual email. the problem is not line height and i cant find where the padding/margin went wrong. Also, for the banner class (that has "personal info" and "skills", the background colour is not reaching the entire left part even though there is no margin/padding. Why?

Tags:

2

Answers


  1. 0

    Browsers add default margin and padding (and other properties). Usually it may be a good practice to add a style removal in your main CSS file. You may have seen CSS files with something like the following:

    * {
  margin: 0;
  padding: 0;
}

    In your case, after inspecting the elements, all the p tags have default margin on them. You can either style all of them, or create a class for the ones you want to remove. Problem with default styles is that they are browser specific, so your sites may look different on each browser if you rely on those styles.

    I’ve added an example image of how you could’ve debugged it – I have selected one of the elements, went to computed and saw that it has margin (as well as it is shown on the screen). This was on Firefox.
    enter image description here

    Login or Signup to reply.
  2. 0

    I think the CSS properties you are looking for are margin-block-start and margin-block-end, they are (at least in my case (Edge Chromium)) added by the user agent.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search