Add a space ( ) after an element using :after
Explanation
It's worth noting that your code does insert a space
h2::after {
content: " ";
}
However, it's immediately removed.
From Anonymous inline boxes,
White space content that would subsequently be collapsed away
according to the 'white-space' property does not generate any
anonymous inline boxes.
And from The 'white-space' processing model,
If a space (U+0020) at the end of a line has 'white-space' set to
'normal', 'nowrap', or 'pre-line', it is also removed.
Solution
So if you don't want the space to be removed, set white-space
to pre
or pre-wrap
.
h2 { text-decoration: underline;}h2.space::after { content: " "; white-space: pre;}
<h2>I don't have space:</h2><h2 class="space">I have space:</h2>
Add space between two words in a ::After Pseudo element CSS
You can use \00a0
instead of spaces in the content
property. They don't get collapsed into a single space.
.c1::after{
content: "SUB TITLE\00a0\00a0THE EXAMPLE";
}
Best practice when adding whitespace in JSX
Because  
causes you to have non-breaking spaces, you should only use it where necessary. In most cases, this will have unintended side effects.
Older versions of React, I believe all those before v14, would automatically insert <span> </span>
when you had a newline inside of a tag.
While they no longer do this, that's a safe way to handle this in your own code. Unless you have styling that specifically targets span
(bad practice in general), then this is the safest route.
Per your example, you can put them on a single line together as it's pretty short. In longer-line scenarios, this is how you should probably do it:
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
<span> </span>
So much more text in this box that it really needs to be on another line.
</div>
This method is also safe against auto-trimming text editors.
The other method is using {' '}
which doesn't insert random HTML tags. This could be more useful when styling, highlighting elements, and removes clutter from the DOM. If you don't need backwards compatibility with React v14 or earlier, this should be your preferred method.
<div className="top-element-formatting">
Hello <span className="second-word-formatting">World!</span>
{' '}
So much more text in this box that it really needs to be on another line.
</div>
How to append a space after an element
Since you asked for some visual whitespace - the simplest and most flexible way is applying it through CSS, not using a space character:
img {
margin-right: 5px;
}
If you want to only apply it to the specific element you create, you can use JavaScript to apply the CSS: http://jsfiddle.net/aRcPE/.
image.style.marginRight = "5px"; // "foo-bar" becomes "fooBar" since
// the hyphen is not allowed in this notation
How to insert space every 4 characters for IBAN registering?
The existing answers are relatively long, and they look like over-kill. Plus they don't work completely (for instance, one issue is that you can't edit previous characters).
For those interested, according to Wikipedia:
Permitted IBAN characters are the digits 0 to 9 and the 26 upper-case Latin alphabetic characters A to Z.
Here is a relatively short version that is similar to the existing answers:
document.getElementById('iban').addEventListener('input', function (e) { e.target.value = e.target.value.replace(/[^\dA-Z]/g, '').replace(/(.{4})/g, '$1 ').trim();});
<label for="iban">iban</label><input id="iban" type="text" name="iban" />
Append a space with jQuery
How about
$("#mySelector").append(" "); // or with & nbsp;
Create A Blank Html Space On The Fly Javascript
If you really just want to append a space character, use the following:
div.innerHTML += ' ';
or
div.innerHTML += ' ';
for the HTML entity.
CSS: how to add white space before element's content?
You can use the unicode of a non breaking space :
p:before { content: "\00a0 "; }
See JSfiddle demo
[style improved by @Jason Sperske]
Extra Space After Paragraph Tags
There is no way to remove the padding & margin on p elements without the usage of css.
The easiest way to override the fact that you cant add a class or change it in a css file is to add it directly to the p element. This is not valid HTML5 though and should be avoided as much as possible.
Try this out:
<p style="margin: 0;">Text</p>
You can add other styling elements within the style tag too. Things like background colors, padding, etc.
Just remember to avoid using this way it when possible.
How to get more space between text and red error message in the input element
Try Adding padding-top to input element
CSS
label[data-valid="error"] input{
padding-top:15px;
}
Link for reference
Hope this Helps..
Related Topics
Change Outline for Outlinedinput with React Material-Ui
How to Reset a CSS Variable (Aka Custom Properties) and Use the Fallback One
CSS Specificity and Inheritance
Bootstrap 3 Slide in Menu/Navbar on Mobile
Replace Input Type=File by an Image
Flex Auto Margin Not Working in Ie10/11
Twitter's Bootstrap 3 Grid, Changing Breakpoint and Removing Padding
CSS for Grabbing Cursors (Drag & Drop)
How to Make Borders Collapse (On a Div)
How Can a Variable-Height Sticky Footer Be Defined in Pure CSS
What Does '&.' in '&.Sub-Title' Indicates in SCSS
Prevent 100Vw from Creating Horizontal Scroll
I Want to Vertical-Align Text in Select Box