Home > Net >  Weird Spacing Issue in HTML/CSS
Weird Spacing Issue in HTML/CSS

Time：01-05

I have the following code:

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();
/* signature animation */

#signature {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: sign 6s ease;
  animation-fill-mode: forwards;
}

@keyframes sign {
  to {
    stroke-dashoffset: 0;
  }
}


/* Text */

#hero h1 {
  margin: 0;
  display: flex;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
  background: black repeat;
  background-clip: text;
  -webkit-background-clip: text;
}


/* changing text CSS */

.quotes {
  display: none;
}

.quotes svg {
  width: auto;
  height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
  <h1 style="margin-bottom: 16px">Sample
    <div >
      <h1>&nbsp;Text

      </h1>
    </div>
    <div > <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
  </h1>
</section>

<h1> Some Random Text Goes Here </h1>

The only problem is that when the signature animation plays, the bottom text which says, Some Random Text Goes Here suddenly moves down a little. I do not want that. Why is that happening? What property would stop that from happening?

When you run the code, you can see that as soon as the signature animation plays, the bottom text gets shifted down. How do I stop that? Any suggestions?

CodePudding user response：

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();
/* signature animation */

#signature {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: sign 6s ease;
  animation-fill-mode: forwards;
}

@keyframes sign {
  to {
    stroke-dashoffset: 0;
  }
}


/* Text */

#hero h1 {
  margin: 0;
  display: flex;
  font-size: 64px;
  font-weight: 700;
  line-height: 56px;
  color: transparent;
  background: black repeat;
  background-clip: text;
  -webkit-background-clip: text;
}


/* changing text CSS */

.quotes {
  display: none;
}

.quotes svg {
  width: auto;
  height: 1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
  <h1 style="margin-bottom: 16px; height:50px">Sample
    <div >
      <h1>&nbsp;Text

      </h1>
    </div>
    <div > <svg xmlns="http://www.w3.org/2000/svg" width="999" height="622" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
  </h1>
</section>

<h1> Some Random Text Goes Here </h1>

CodePudding user response：

The problem is that two items printed on the same line have different heights. To avoid this problem, you can make the following changes:

enter image description here

<style>
    .quotes {
        /* You should add the following declaration to the quotes class style. */
        height: 50px !important;
    }
</style>

<div >
    <h1>&nbsp;Text</h1>
</div>

<div >
    <!-- <path> elements -->
</div>

CodePudding user response：

The row takes 56px height and 16px margin bottom when it is showing "Sample Text", while it takes 71px height and 16px margin bottom when the signature appeared.

So the easiest way to avoid bottom text gets shifted down is to define certain height for #hero div. For example:

#hero {
  height: 5em;
}

In addition to your code, the CSS line-height: 56px; will cut the bottom of letter "p" in "Sample", see if you want to remove that CSS.

CodePudding user response：

You have need to adjust h1 line-height and SVG height!

(function() {

  var quotes = $(".quotes");
  var quoteIndex = -1;

  function showNextQuote() {
      quoteIndex;
    quotes.eq(quoteIndex % quotes.length)
      .fadeIn(2000)
      .delay(2000)
      .fadeOut(2000, showNextQuote);
  }

  showNextQuote();

})();
/* signature animation */

#signature {
  stroke-dasharray: 1920;
  stroke-dashoffset: 1920;
  animation: sign 6s ease;
  animation-fill-mode: forwards;
}

@keyframes sign {
  to {
    stroke-dashoffset: 0;
  }
}


/* Text */

#hero h1 {
  margin: 0;
  display: flex;
  font-size: 64px;
  font-weight: 700;
  line-height: 1em;
  color: transparent;
  background: black repeat;
  background-clip: text;
  -webkit-background-clip: text;
}


/* changing text CSS */

.quotes {
  display: none;
}

.quotes svg {
  width: auto;
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="hero">
  <h1 style="margin-bottom: 16px">Sample
    <div >
      <h1>&nbsp;Text

      </h1>
    </div>
    <div > <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 999 622" fill="none">
<path id = "signature" d="M9 300.5C53.9664 263.275 78.4994 241.966 120 202.5C166.845 161.224 190.864 137.434 228.5 93.4999C268.281 48.0683 299.802 25.4041 331 12C362.198 -1.40413 392.082 42.7628 401 76.9999C409.918 111.237 384.678 178.5 370 211C355.322 243.5 339.5 255.5 258 325C176.5 394.5 157 384 157 384C157.169 361.808 164.353 349.685 198 329C264.54 282.892 278.027 278.548 293 279C323.052 280.376 328.446 282.758 331 288C346.097 303 333.715 325.644 319 361C304.009 391.294 291.48 402.027 271 424" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M370 328.5C370 367.5 342.392 399.14 336.5 441.5M386.5 394.5C374.332 420.851 374.523 433.154 395 448C410.813 459.688 438.817 434.738 488 391.5C467.953 399.833 455.382 401.84 427.5 394.5C450.782 412.123 491.076 425.723 500.5 441.5C509.924 457.277 441.308 454.23 444.5 455.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M301.5 369C305.026 379.077 312.566 385.384 363 401" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M560.5 412.5C543.503 405.865 534.124 402.484 526 416C528.367 425.276 525.471 429.235 572 451.5C576.265 461.546 566.717 463.259 533.5 461" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M665.5 425C653.546 446.2 645.147 455.813 620.5 460C603.392 456.418 600.659 454.042 601.5 449.5C605.587 419.784 611.129 420.488 620.5 419C645.804 416.165 650.461 418.964 656.5 425C655.121 437.207 655.982 443.17 665.5 449.5C670.836 455.749 674.741 457.481 682 460" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M714.5 382C736.684 377.781 749.833 375.834 807.5 392.5C815.173 403.089 802.279 414.61 769 438.5C769.523 451.598 784.552 455.127 840 454C840.888 464.136 830.5 471.5 807.5 463" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M720 453.5C713.174 438.927 712.517 429 720 406.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M755.5 291.5C756.179 291.065 759.099 289.934 765.5 287.5C765.5 287.5 772 287.5 765.5 298C759 308.5 761.562 304.559 755.5 302C752.193 298.729 752.486 296.357 755.5 291.5Z" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M551.5 253C557.85 236.659 553 239.325 576.5 224.5C600 209.675 619.5 220.187 627.5 224.5C635.5 228.813 659.036 279.692 668.5 296.5C677.964 313.307 689 318 689 318C702.917 321.702 706.005 317.282 710.5 308" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M989.5 508.5C746.513 510.932 625.213 498.488 314 564" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
<path  id = "signature" d="M471.5 612.5C642.412 577.017 741.308 566.1 924.5 566.5" stroke="#0563BB" stroke-width="18" stroke-linecap="round" stroke-linejoin="round"/>
</svg></div>
  </h1>
</section>

<h1> Some Random Text Goes Here </h1>

Page link：https//www.codepudding.com/net/251326.html

Prev:AutoComplete only selects value if I click on the dropdown suggestion
Next:Add element using javascript at specific position
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding