This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 8 years ago.
This is css code:
#div_0, #div_1 {
width: 100px;
height: 100px;
display: inline-block;
}
#div_0 {
background-color: #090;
}
#div_1 {
background-color: #900;
}
and this is HTMl
<div id="div_0"></div>
<div id="div_1"></div>
this displayd so:
http://jsfiddle.net/7G63S/
As you see, here is spice between div tags, for delete this space I can write html so:
<div id="div_0"></div><div id="div_1"></div>
and problem resolved:
http://jsfiddle.net/7yE2M/
But intereset, how can delete space between divs with css, if html look like so:
<div id="div_0"></div>
<div id="div_1"></div>
?
or make this impossible ?
P.S. white-space: nowrap not helps in this case.
Set line-height and font-size to 0 on the wrapping container - see http://jsfiddle.net/7G63S/1/
Add the float:left style to the divs #div_0, #div_
Demo here http://jsfiddle.net/7yE2M/1/
Are you wanting the whitespace for source formatting reasons or is this a case of being unable to modify some generated HTML? If you can modify the html, your best bet is to simply eliminate the whitespace, but that doesn't have to mean you need to lose your formatting. Just comment out the whitespace:
<div id="div_0"></div><!--
--><div id="div_1"></div>
Edit: more solutions can be found here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Related
I use text-align: justify for multiple i tag. It works well with multiple I tag in multiple lines, but when to combine in one line, it doesn't work.
You can try my jsfiddle at https://jsfiddle.net/lhphuc210291/zvajLgfc/8/
html code
<div class="m_grid">
<i>abc</i>
<i>def</i>
<div class="m_justify_fix"></div>
</div>
<br/>
<div class="m_grid">
<i>abc</i><i>def</i>
<div class="m_justify_fix"></div>
</div>
css code
.m_grid {
text-align: justify;
line-height: 0
}
.m_grid .m_justify_fix {
display: inline-block;
vertical-align: top;
width: 100%;
height: 0;
overflow: hidden
}
First div tag works ok but with second div it doesn't work. I would like to know what is the differences from these two case. Because I render HTML by using angular component templateUrl. It's auto render HTML code without break line between i tag and css not work.
Simple answer : there’s nothing to justify if there’s no whitespace between.
I have two divs declared as,
<div id="icdAid" align="center" ></div>
<div id="errorMsg" align="center" ></div>
How can I add space between them?
You can add this to your CSS
#icdAid
{
margin-bottom:10px;
}
This will add a space of 10px to the bottom of icdAid div.
JSFIDDLE DEMO
In html - use <br/> to add new line.
In css - #icAid{ margin-bottom: 20px; }.
Also align attribute is deprecated, use css for that div{ text-align: center; }
Your should use the CSS solution
#icdAid {
margin-bottom: 15px;
}
This is used if you want the results replicated to wherever you use the icdAid id. But if you want a fix on a single page use <br/> tags in-between the close and open tags of you <div>'s.
With the CSS solution you have more control over the spacing as <br/> tags are a set width.
This question already has answers here:
How remove border around image in css?
(18 answers)
Closed 9 years ago.
I'm a mobile developer struggling with some HTML works in my app. It looks too easy but I couldn't figure it out:
<html>
<body>
<img src="http://www.reactiongifs.com/r/iwsyih.gif"/>
</body>
</html>
a white border around image appears but I don't want that happen. how to remove it? thanks
try this code please
img{
border:0;
}
You can also add a class for only this image:
img.img{
order:0;
}
<img src="http://www.reactiongifs.com/r/iwsyih.gif" class="img"/>
DEMO
By default the setting of border is medium none color
It's the default padding/margin on the body element. That's the purpose of a 'CSS reset'. Just add this to your styles:
body {margin: 0; padding: 0;}
<img src="http://www.reactiongifs.com/r/iwsyih.gif" style="margin:0px;padding:0px;border:0px"/>
Try:
<img src="http://www.reactiongifs.com/r/iwsyih.gif" style="border:0px;"/>
If you are using css attachment, then:
img{
border:0;
}
If you are using styles in the div itself, then use style="border:0px"
How can I remove the space between the <fieldset>'s in the following example? Here's a JSFiddle.
HTML
<!-- Displays bad, but HTML looks good -->
<fieldset>test</fieldset>
<fieldset>test</fieldset>
<!-- Displays good, but HTML looks bad -->
<fieldset>test</fieldset><fieldset>test</fieldset>
CSS
*
{
margin: 0;
padding: 0;
}
fieldset
{
background-color: red;
display: inline-block;
}
I'd like to be able to leave space between the <fieldset>'s in the HTML code, since their contents are quite long. But I need them to display right next to eachother.
The best solution is to remove any spaces between inline-block (or inline) tags.
You can use comments for better readability:
<fieldset>test</fieldset><!--
--><fieldset>test</fieldset>
There is no CSS solution which can be 100% reliable.
EDIT: it doesn't seem it's the case but some template engines provide this behaviour, like twig's spaceless
Demo
How about float: left;:
CSS:
fieldset {
background-color: red;
float: left;
}
A different solution is to put the fieldsets in a DIV container and set the font-size to 0 using CSS for that container. Then, of course, set the font-size of the field-sets back to whatever you need it to.
Setting the font-size to 0 on parent container basically removes the white-space between inline-block elements of that container.
I asked a question yesterday about applying an uneven shadow with CSS3, ultimately the end result was this (which I was really impressed with!)
Unfortunately, when I started trying to use this on images, I end up with this (the shadow doesn't appear at all)
I can't seem to figure out why this happens, I've tried eliminating the alt text (which doesn't help) however giving the img a blank src attribute fixes it (obviously though I don't want to do this!)
All I can think is that it might be something to do with the content:"" css? I've tried messing with it but get nowhere.
I could use a div to wrap the img, and give that the class, but ultimately I want to avoid this.
So just put the image inside such a div. Will that be acceptable? Like this:
<div class="container"><img src="http://intelligentpenguin.co.uk/blank_story.gif" alt="" /></div>
http://jsfiddle.net/qUpZX/4/
There is a related question here
Apparently it has to do with the "before" and "after" pseudo-classes.
Why dont you use a div around
<div class="container">
<img src="http://intelligentpenguin.co.uk/blank_story.gif " alt="" />
</div>
and change css like
.container img{
width: 300px;
height: 200px;
margin: 50px;
background-color: #eeeeee;
z-index: 1;
}
DEMO