Why is there a white space between parent div and inner div in react?
Remove margin from body or simply add
body{
margin : 0px !important;
}
Remove space between inline-block elements in React
React specifically doesn't add whitespace between block elements, you need to do that yourself manually. See this discussion on Github and an official blog post explaining the details.
Here is a simple example:
class SimpleExample extends React.Component { render() { return ( <div> <div>NO</div> <div>SPACES</div> HERE </div> ); }}
ReactDOM.render(<SimpleExample />, document.getElementById('example'));
div { display:inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="example"></div>
Remove whitespace above div in react app
Most browsers (eg. Chrome) come with a default set of rules (user agent stylesheet) and set rules like margin
in ul
's, so you likely have a margin-top
(-webkit-margin-before: 1em;
) set to your ul
.
Set margin-top: 0
on the ul
will remove the space:
ul {
margin-top: 0;
}
Why is there an unexplainable gap between these inline-block div elements?
In this instance, your div
elements have been changed from block
level elements to inline
elements. A typical characteristic of inline
elements is that they respect the whitespace in the markup. This explains why a gap of space is generated between the elements. (example)
There are a few solutions that can be used to solve this.
Method 1 - Remove the whitespace from the markup
Example 1 - Comment the whitespace out: (example)
<div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div><!--
--><div>text</div>
Example 2 - Remove the line breaks: (example)
<div>text</div><div>text</div><div>text</div><div>text</div><div>text</div>
Example 3 - Close part of the tag on the next line (example)
<div>text</div
><div>text</div
><div>text</div
><div>text</div
><div>text</div>
Example 4 - Close the entire tag on the next line: (example)
<div>text
</div><div>text
</div><div>text
</div><div>text
</div><div>text
</div>
Method 2 - Reset the font-size
Since the whitespace between the inline
elements is determined by the font-size
, you could simply reset the font-size
to 0
, and thus remove the space between the elements.
Just set font-size: 0
on the parent elements, and then declare a new font-size
for the children elements. This works, as demonstrated here (example)
#parent {
font-size: 0;
}
#child {
font-size: 16px;
}
This method works pretty well, as it doesn't require a change in the markup; however, it doesn't work if the child element's font-size
is declared using em
units. I would therefore recommend removing the whitespace from the markup, or alternatively floating the elements and thus avoiding the space generated by inline
elements.
Method 3 - Set the parent element to display: flex
In some cases, you can also set the display
of the parent element to flex
. (example)
This effectively removes the spaces between the elements in supported browsers. Don't forget to add appropriate vendor prefixes for additional support.
.parent {
display: flex;
}
.parent > div {
display: inline-block;
padding: 1em;
border: 2px solid #f00;
}
.parent { display: flex;}.parent > div { display: inline-block; padding: 1em; border: 2px solid #f00;}
<div class="parent"> <div>text</div> <div>text</div> <div>text</div> <div>text</div> <div>text</div></div>
Delete white space between divs
You get whitespace there because you have whitespace inbetween the divs. Whitespace between inline elements is interpreted as a space.
You have:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div>
<div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
Change for:
<div id="left_side">
<div id="plan">
<h1>div 1</h1>
</div>
</div><div id="right_side">
<div id="news">
<h1>div 2</h1>
</div>
</div>
However, this is a bad way to do what you want to do.
You should float the elements if thats what you want to do.
How do I get rid of the white spaces on both sides of an image?
G-Cyr was correct. p-0 on the container div and getting rid of the -1rem on the left and right margins fixed the issue with the padding on the image. The other styling issues were caused by the naming of the CSS stylings. img-fluid was being manipulated on another file as well. Gotta learn better naming habits lol. Thank you G-Cyr!
Rendering empty space in React
You could use <span> </span>
:
class Blinker extends React.Component { constructor(props) { super(); this.state = { appear: true } this.blinker = this.blinker.bind(this); }
blinker() { this.setState({appear: !this.state.appear }); }
componentDidMount() { setInterval(this.blinker, 1000) }
componentWillUnmount() { clearInterval(this.blinker); }
render() { const name = "testing"; const underScore = "_"; const com = "com"; return ( <div> <div id="test"> { name } </div> <div id="test"> { (this.state.appear) ? underScore : <span> </span>} </div> <div id="test"> { com } </div> </div> ); }}
ReactDOM.render(<Blinker />, document.getElementById('app'));
#test { display: inline-block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app"></div>
Related Topics
How to Set Filename for Base64 Rendered Pdf Using Object Tag
Html Video Not Playing in Safari Browser
Material Design - Stepper How to Remove/Disable Steps
How to Align Two Submit Button on Same Line
Font-Size and Img Height Too Big At Website Through Smartphone Oneplus 3T
Input Type Date Appearance in Safari on Ios
How Change Text and Color of Button Browse of Input File
Why Align Items Center Not Working
When Div With Absolute Position Is Added Cannot Click on Links
How to Center an Element Horizontally and Vertically
Can't Scroll to Top of Flex Item That Is Overflowing Container
Styling an Input Type="File" Button
Why Can't the ≪P≫ Tag Contain a ≪Div≫ Tag Inside It
Setting Attribute Disabled on a Span Element Does Not Prevent Click Events