How to Remove "Invisible Space" from HTML

How to remove Invisible space from HTML

The linebreaks are causing it - http://jsfiddle.net/RhvjF/1/

Can't find the particular post, but smart people suggested 3 ways of fixing it:

Put everything in one line (remove all line breaks)

Comment out the line breaks, like

<span style="display: inline">Hello Wo</span><!--
--><span style="display: none;"></span><!--
--><span style="display: inline">rld</span>

Set the container font-size to 0 and re-set it for span-s

UPDATE

There are at least 2 more ways:

Break the tags, like

<span style="display: inline">Hello Wo</span
><span style="display: none;"></span
><span style="display: inline">rld</span>

Float the elements, i.e. span { float: left }

How do I remove invisible space around text (Heading)?

You used up higher values of height and width that's why it happened. I changed that:

#section3 h1 {
  /* margin-top: 260px;
  margin-left: 420px; */
  font-size: 80px;
}

#section3 p {
  margin-top: 10px;
  margin-left: 590px;
  font-size: 30px;
}

.img4{
  position: relative;
  top: 641px;
}

#section3{
  background: url('../Images/CF3.jpg');
  position: relative;
  bottom:4px;
  width: 390px;
  height: 300px;
}
#layer{
  background-color: #4c96eb75;
  width: 100%;
  height: 100%;
}

#layer h1{
  display: block;
  margin: 0;
}

<div id="section3">
  <div id="layer">
     <h1>Parmi les premiers de classe !</h1>
  </div>
   </div>

How to remove an invisible space between div tags

I've finaly found the problem thanks to all of You but especialy thanks to Notepad++

The problem was caused by the invisible blank spaces (from the SPACE key).
I don't know why, but according to my knowlege this is the first time multiple space strokes to be detected by the browser.. I guess the newer browsers now are registerng more then one blank space after another.

I just opened the html scripts with Notepad++ and set from View->Show Simbol->Show All Characters. Then i've deleted all of the unneccessery empty spaces and that solved my problem.

HTML Character - Invisible space

You can use word-spacing for this. However to make a more dynamic property you want to use the em unit. This way the unit is based on the font-size, so actually supports all the font families and font sizes:

ol li
{
    word-spacing: -.2em;
}

em is not an absolute unit - it is a unit that is relative to the
currently chosen font size.

source: Why em instead of px?

jsFiddle

Get rid of invisible space in css

Add this to your css

#menueList { display: initial; }

How to completely remove the .invisible div?

Use .d-none instead of .invisible.

.d-none will use the css property display: none;.
https://getbootstrap.com/docs/4.0/utilities/display/

.invisible uses visibility: hidden; which can be useful to hide content but keep it for audio readers.
https://getbootstrap.com/docs/4.0/utilities/visibility/

Remove invisible margin between div tags

Because browsers automatically add some margin before and after each <p> element, you need to set the <p> margin into 0 (zero) like this:

body {  background-color: #E8E8E8;}#content {  width: 80%;  margin-left: 10%;}#header {  background-color: #4C66A4;}#mainBody {  background-color: #FFF;}#footer {  background-color: #4C66A4;}
#mainBody > p, #header > p, #footer > p {  margin: 0; /*set all <p> elements inside the div id of #mainBody, #header and #footer into margin: 0*/ }

<body>  <div id="content">    <div id="header">      <p>header</p>    </div>    <div id="mainBody">      <p>body</p>    </div>    <div id="footer">      <p>footer</p>    </div>  </div></body>

How to Remove "Invisible Space" from HTML