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

Margin sizes are not the same – Html

Although both the font-sizes and margin-tops are the same, the heading has more space below than above. How do I make the space below the same as the space above? Or is this how the markup should look? This is one instance of the problem!

.top-heading {
  font-size: 3rem;
  width: 100%;
  text-align: center;
  margin-top: 3rem;
}

.text {
  font-size: 3rem;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}
<main class="entire-section">
  <!-- main part of program, not including aside -->
  <section class="main-part-of-page">

    <article class="">
      <h1 class="top-heading">Keep Cooking Simple</h1>
      <div class="text">

        &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspLorem ipsum dolor sit amet, consectetur adipisci elit, sed

I tried using em instead of rem. I expect the space above and below the heading to be the same.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    Well, these solutions did not work, however, I have determined that I need a font that has an Ascent and Baseline equally distanced to the Top and Bottom. These look like they would work: font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', 'sans-serif'. Please do comment!

    Joshua


  2. 0

    It’s worth noting that certain browsers include pre-loaded CSS code as a default setting. It’s common for developers to add this code at the beginning of their CSS file or global CSS file to override any default styles.

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

    * selects all the HTML elements, and here you can learn more about box-sizing.

    If you haven’t already tried it, consider using it to overwrite any default styles that come with the browser. This way, you can ensure that your project’s styling adheres to your own custom design rather than relying on the browser’s defaults.

    You can also select the pseudo-elements and do the same thing for them like so:

    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
    Login or Signup to reply.
  3. 0

    Add the CSS property line-height to both the heading and the .text class to ensure that the line height is consistent throughout the text, including the heading.

    .top-heading {
  margin-top: 3rem;
  font-size: 3rem;
  line-height: 1;
  width: 100%;
  align-items: center;
  text-align: center;
}

.text {
  font-size: 3rem;
  line-height: 1;
  margin: 0 auto;
  margin-left: 10rem;
  margin-right: 10rem;
  margin-top: 3rem;
}

    This example makes sure that there is no extra space above or below the text by setting the line-height property to 1. If necessary, you can change the line-height value to get the spacing you want.

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

Back To Top
Search