http://www.lethalmonk6.byethost24.com/index.html
If you inspect with firebug the spacing between the "project-link" divs, there are a few pixels of added margin between each div. I have the margin set to 20 px, and then these little bits gets added on. Where is it coming from?
You're using display:inline-block so the white space between the elements is what you are seeing there. You can either remove the white space between the divs or use float: left instead.
To elaborate... if you're using display: inline-block do this:
<div></div><div></div>
Instead of this:
<div></div>
<div></div> // White space is added because of the new line
As Terminal Frost said, add float: left to the class, and remove display: inline-block. Additionally, add content: "." to the parent div container to fix the wrapping issue you'll have from doing that.
As Lucifer Sam said, display:inline-block will show you space between element if there are one.
The slution given is good:
<div></div><div></div>
But for element with large content, i personnaly prefer this solution of not having the white space between display:inline-block elements. This is what i do:
<div>
large content
</div><!-- No space
--><div>
large content 2
</div>
I wasn't quite happy with the provided solutions here and then I came across a fix that I actually was using to address this issue before, but forgot about it...
All you might need is to simply add font-size: 0; to the parent container (you can overwrite this rule for the children, so it shouldn't break your fonts).
So, here's a basic example:
<div class="font-zero">
<div class="inline-block"></div>
<div class="inline-block"></div>
<div class="inline-block"></div>
</div>
<style>
.font-zero { font-size: 0; }
.inline-block { display: inline-block; }
</style>
With that example you don't have to worry about the markup in your code (personally, I think removing line breaks in the code to solve this issue is really ugly) and also you don't need to use floating, which might be not optimal for many reasons.
Since this page was the first Google result, I hope I'll get here next time I come across this issue and forget the easy fix... And maybe it would be useful for someone else too :)
Related
I know that a newline in html between elements is treated as space, but I think this is pretty scary when you try to play with responsive layout.
For example, here we have the expected and correct behaviour, but to obtain it I had to remove the newline in the html between the element:
https://jsfiddle.net/xew2szfu/1/
<div class="recommend-friend__dialog">You should see only me</div><div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
Here I wrote the html with a newline, as you normally do, and everything got broken:
https://jsfiddle.net/rL1fqwkc/1/
<div class="recommend-friend__dialog">You should see only me</div>
<div class="recommend-friend__dialog recommend-friend__dialog--variant">... but NOT ME!</div>
I know I can fix the problem with a float: left, but I wonder if I missed something, the default behaviour sounds really incorrect to me.
It is happening because inline-block puts a space in between elements, and with the space the second div moves down, since it can't fit on the line any more.
There are many ways to combat this. As you said, float is one of them. This excellent CSS Tricks article is a great help, but I'll go over the ones you probably want:
Negative margin:
nav a {
display: inline-block;
margin-right: -4px;
}
Very simple, you can have a nice html format, but moves the element over to hide the space.
Set the font-size to 0:
.recommend-friend__slider{
font-size: 0;
}
.recommend-friend__dialog {
font-size: 12pt;
}
Or, my personal favorite, skip the inline block and use flexbox instead.
What is the CSS best practice when you want to give space to an element placed just after a first element.
Asume this html
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
Should you use this css
.a-block { margin-bottom: 10px; }
or
.another-block { margin-top: 10px; }
?
i would use :nth-child width margin-top
div:not(:first-child) {
margin-top: 10px
}
<div class="a-block">lorem</div>
<div class="another-block">ipsum</div>
<div class="another-block-1">ipsum</div>
<div class="another-block-2">ipsum</div>
In my opinion, margin-top in the second block is a better practice.
Indeed, the first div shouldn't take care about others divs since it was the first.
If the second is removed I shouldn't have to remember to remove margin-bottom from the first.
Using margin-top would eliminate the need of using a next sibling selector. It also removes the need of removing the bottom-margin from the last-child to avoid padding discrepancies when using text in panels or boxes.
Since nobody has mentioned it yet, I wanted to add that you could use both at once. This will cause them to meld together through a feature called margin collapsing. In certain situations this could as well be the best practice since you can use it to declare "this element need at least this much space below it". Note that margin collapsing may backfire on you if you accidentally use properties that disable it, such as floats, borders or flexbox.
.a-block {
margin-bottom: 10px;
}
.another-block {
margin-top: 10px;
}
div {
background-color: #e0e0e0;
}
.float {
float: left;
clear: both;
width: 100%;
}
<div class="a-block">Only 10px margin</div>
<div class="another-block">between these elements</div>
<hr />
<div class="a-block float">Double margin because</div>
<div class="another-block float">of the float</div>
It is completely up to the context in which the CSS is needed - is the short answer. It depends whether you need the first element pushed down as well as all the other elements. or you need the first element to be flush with the top of the parent but you need the bottom element to have a margin at the bottom.
The common sense thing to think is that the first element is already there so the second element will surely need to be "pushed" down, so the natural thing to do would be to add margin bottom to the previous element (at least that is the way that my brain works).
Current CSS browser support dictates that this is the preferred method. Due to the fact that, in CSS, there is a "next sibling" selector (~), an "adjacent element" selector (+) , and :first-child is more widely supported than :last-child is (purely because it is more difficult to implement in a browser than :first-child is). Namely this :last-child support issue is IE8 but this still affects us today when developing for certain clients.
There are no previous sibling selectors, so this makes me prefer the method of adding margins and paddings to the bottom of elements and not the top. Purely just to keep everything in my CSS to be using the same principal of "pushing things down from above or selecting the first element"
You should always be consistent on how you apply the styles.
For example, if you have a hero and think about the inside elements. For example, you have a title, optionally a button and optionally text below that. You can end up with having margins or padding that should not be there and were intended to have a button there.
Also, the point about collapsing margins is important when you have a design with different use cases. Padding doesn't collapse but if used improperly, can cause elements not to center 'properly'.
I have divs after each other that look like this.
<div class="tag">one tag</div>
<div class="tag">second tag</div>
<div class="tag">third tag</div>
...50 more of them....
(in CSS)
.tag {
display:inline
}
I found out that I have too many of them and they start breaking in the middle, and I don't want that.
However, when I set the nowrap like this
.tag {
display:inline;
white-space:nowrap;
}
all of them are on one line, making more than 100% of the window. I don't want that.
What I want: if there are too many of these divs on one line, the list of the divs can break, but the divs themselves don't. I just don't want to break the divs in the middle.
I hope I tell it clearly enough.
If I understand right, you want them to lay side to side, and then break to a new line when the row is full, but not in the middle of a div.
All you need is
.tag {
float: left;
}
See fiddle here for demo.
You can also add padding-left: 5px; if you want some space between them.
.tag {
display:inline;
white-space:nowrap;
float:left;
}
That worked. (and adding "clearing" empty div with clear:both under that.)
Depending on the browsers you need/want to support, you may find using
.tag {
display:inline-block;
vertical-align:top;
}
a better solution. Since it is a <div> that you want to apply this to, the style will not work out of the box for IE5-7 - see http://www.quirksmode.org/css/display.html#t03. There are workarounds of course - How to fix display:inline-block on IE6? - if you want to use it with those browsers.
The benefit of inline-block is that you do not need to clear the floated content and also that your elements are not rendered out of normal flow. I try to avoid floating elements where possible as in my experience it has caused layout problems.
However, there are a couple of potential catches with this approach. One of which I have already addressed, by adding a vertical-align:top rule. See a previous answer for why this happens - https://stackoverflow.com/a/12950536/637889
The other is due to potentially unwanted white-space between the inline-block elements. See http://css-tricks.com/fighting-the-space-between-inline-block-elements/ for some clever ways around this.
I'm running into a weird issue that I've never noticed before. I have the following code:
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li>
<li>
No
</li>
<li>
No
</li>
</ul>
</div>
Very simple block of code. Ignore the second no, as it's literally only there to give me a third li to help me figure this out. Now, here's the CSS...
div.feedback {
position: relative;
}
span {
float: left;
}
li {
display: inline-block;
padding: 0;
margin: 0;
border-left: 1px solid #000
}
Now, here's what's happening:
See the extra spacing that's seemingly coming from nowhere? I moved to border-right just to test it, and got even more inconsistent results:
Now, the 3rd LI has 0 padding and margin, as it should. The other two still have a spare space.
Lastly, the browser comprehends the proper height and width of the li, and attributes no margin or padding to it. According to the browser, the text should be smashed up against the border, as I also expect.
Can someone please explain what this extra 3-5 pixels of spacing is on the right of the text?
That's because linebreaks are treated as a space in HTML. You've specified your inner elements to be inline-block, which means that spaces between them are displayed.
You can either:
Set the font-size on the parent to 0, and then back to normal on the <li>,
Simply eliminate the linebreaks between <li>s.
A third (lesser) option exists, it's the use of float.
float was originally meant to allow for elements to be pushed to the edges of the container, while having text flowing around it freely (like images in a newspaper). That feature was exploited used for layout as well, when people discovered it would make block level elements stack horizontally.
Using float would mean you need to clear after yourself, by either using a clearfix, or having an element with clear: both set on it.
This option is lesser, because much like tabular layouts, it's not the original purpose of float, implementation may differ between browsers and between time periods, but most importantly, it adds the overhead issues of clearing. (So stick with display: inline-block if you can help it!)
It's from white space in your code. See this jsFiddle example
<div class="feedback">
<span> Was this helpful?</span>
<ul>
<li>
Yes
</li><li>
No
</li><li>
No
</li>
</ul>
</div>
Somewhere you have a display:inline-block.
The inline-block display behaves like this. It shows any space in the code and newlines as spaces.
You have to either manually remove spaces and returns in the HTML or to change the display to something else.
I've got a dropdown I've made: http://jsfiddle.net/QPxVe/
For some reason, jsFiddle is altering the alignment which is not present outside of jsFiddle - this is not the issue.
I seem to have a gap between items and I cannot see why it is being added.
The Fiddle has different colours and fonts, but other than that, everyting is identical. The arrow in the image below points to the problem - it is like that for all the divs. If I set the margin to
-4px for the main .dropdown class, it is fixed but I'm not sure why the space is appearing in the first place...
It's because whitespace (e.g. new-line characters) around display:inline-block element is rendered as space. One of solutions is to set font-size for parent element to zero.
See http://jsfiddle.net/Kb7Fp/ where following rule is added:
BODY > DIV {font-size: 0; }
It is because of the whitespace (as Marat said).
Another solution (that I found more convenient) is to comment the line break like that:
<div class="dropdown"><span>Rice cakes</span></div><!--
--><div class="dropdown"><span>Enemies</span>
You can see the result here: http://jsfiddle.net/EfQdX/
Marat has the answer as to why the whitespace is there.
Depending on your reasons/needs for display: inline-block, another solution could be to add float: left; to the .dropdown rule.
Like on this fiddle: http://jsfiddle.net/QPxVe/2/