How to reduce gap between two display:inline items?
gap is showing on all browser?
ul.tabs li {
display:inline;
margin:0 padding:0;}
alt text http://img167.imageshack.us/img167/7283/pruebank5.gif
I can fix the problem using float:left in the LI elements but I need
to understand why it's happening.
You have whitespace between your inline elements. float: left fixes the problem, because floating implicitely converts the element to a block element, regardless of display: inline.
And you need a ; between margin:0 and padding: 0.
... but I need to understand why it's happening.
You may have whitespace or new lines between your inline elements.
For further reading, you may want to check out the following Stack Overflow post:
Best way to manage whitespace between inline list items
Reduce the word-spacing CSS property to less than 1em.
Related
On this page, when you hover over a navigation item, there is a gap to the left of it:
Can you help me to remove this gap please?
To solve your issue. Try to float all the li elements inside ul which remove the magical margin between each li. (screenshot below is the aftereffect)
The reason you get the spaces is because, well, you have spaces between the elements (a line break and a few tabs counts as a space, just to be clear).
To Solve This Issue in General
Remove the spaces
Use negative margin
Skip closing tag (Hack)
Set font-size to 0
Use float
Use flexbox
Read more about the magical space for inline items,
https://css-tricks.com/fighting-the-space-between-inline-block-elements/
use display:block instead of display:inline-block then add float:left for inline elements
display:inline-block add extra spaces in px when you write code in beauty
mode with spaces and line's
something like this:
.genesis-nav-menu .menu-item {
display: block;
margin-bottom: 0;
padding-bottom: 0;
text-align: left;
float: left;
}
I have a class defined like this:
<div class="float-left inline">
where:
.inline {
display: inline;
}
.float-left {
float: left;
}
Can someone tell me if I need to use both float: left; and display: inline;. I am bit confused as they both seem to do the same thing.
display:inline means a element may be placed next to other items.
This is different from block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.
float:left; vs display:inline; vs display:inline-block; vs display:table-cell;
Actually there is no need to use both the properties together, but as you are using two classes having respective properties is fine, let me explain you here, if you use display: inline; ONLY, than first you need to see how inline is it different from float
Inline Elements
Floated Elements
Now, yes, am aware that span are already inline elements, but if you see, when I use float, it makes an inline element behave like an inline-block, it applies margins at top and bottom as well, while display: inline; won't.
Another difference is float is in general different positioning, when you float an element to left or right, it creates an empty space besides, which makes element below it to shift besides that.
Floated Example
While display: inline; won't
Inline Example
See the difference? So it depends on you what suits best to your needs, just make sure you clear your floating elements by using overflow: hidden; or any clearfix available out there else you will see some unexpected behavior of your layout.
Conclusion: Even if you use display: inline;, your element will be a block level element and inline, so there's no need to use display: inline;
With display you are changing the display type of the element.
With float you are setting position for that element.
Here is an answer with practical explanation why would you prefer float for positioning.
Although the two work on different aspects of the element they can be used on conjunction. For example changing an Anchor to display:block and float:left will work and allows you to set a height and width on it.
Taking a div and applying display:inline and floating it wouldn't make much sense no.
Not redundant. Actually, I meet a problem when I set a float: right with an element and it works on chrome not works in IE. Specifically, on IE, the content of element overflows the boundary of the container. So, I use display: inline and float:right together, it works very well on chrome and IE 11.
I'm making a dropdown menu, but all the styles from the first ul is being added to the styles on every ul beneath the first ul.
I've tried overriding the styles using !important, and moving the css to different levels.
Anyone got a clue about whats going on here?
This image probaly explains it the best way: http://screencast.com/t/UrkRbjjaYctp
Thanks.
#menuwrapper > ul{
padding-left:37px;
}
#menuwrapper ul ul {
padding-left:40px;
}
This should solve your issue
This is expected behavior. Paddings are added relatively.
If you don't want the nested ul to be padded 37px you have to remove the padding from parent ul (or use some hack as negative margin e.g. margin-left: -37px).
If you remove padding from the parent you will probably need to add some margin to each its child to preserve the layout. I'd suggest to reconsider the HTML structure.
For some reason my list items are not sitting within my UL element which is disturbing the flow of the page, and doesn't look right. I have tried every position element under the sun but nothing works. I wondered is it because I'm styling a different div instead of the UL element?
Please see example here
The red border is suppose to hold the list elements and if one list description becomes longer, then the red background should grow as well.
Thanks
Your LI have float in it so you have to clear his parent which is UL. Write like this:
ul{
overflow:hidden;
}
Check this http://jsfiddle.net/Uc5cr/1/
Try this one
ol, ul
{
overflow:auto;
}
See the updated fiddle: http://jsfiddle.net/Uc5cr/8/
What's happening is that the LI elements are floating, and therefor going over the UL outlines. You'd typically solve this by clearing your LI elements with a element using clear: left; property in CSS, when you want to clear the floating.
But since this is in an un-ordered list, it is probably best to use a CSS hack called "clearfix" on your UL-element to solve this. That way the UL element will follow the LI elements in height.
Example: http://jsfiddle.net/mikaelbr/JkGRj/
Note: There are many versions of the clearfix hack. Do a google search to find some, if you are interessted in seeing how they work.
give overflow:hidden to the div erd background in order to contain the ul element
Check this out http://jsfiddle.net/Uc5cr/7/
I am trying to increase the width of #Item, but it increases only with text width.
HTML
<div><span class="Item">Brand Strategy:</span><span class="Summary">Strategy</span></div>
CSS
.Item{background-color:#000; height:40px; color:#FFF; text-align:center; width:200px;}
How do I get the specified width for #Item.
Thanks
Jean
I wrote part of this in comments above, but rewriting here for further clarification.
<span> is an inline element. Inline elements can't have a fixed width; their width is determined by the width of the text they contain, plus the margins and paddings.
See CSS fixed width in a span
You can change this behavior by turning your span into a block-level element. This is done by setting display: block or display: inline-block. But this also introduces other behavior, such as floating and taking up a whole line instead of staying inside the paragraph. This, again, can be countered by float: left and similar options. Weigh the different options and decide based on your needs.
In your specific code example, you might benefit from using <dt> and <dd> tags instead. They were built for exactly that purpose.
The span is inline element, you can not apply width or height to it unless you make it block-level element like this:
span.Item{
display:block;
background-color:#000;
height:40px;
color:#FFF;
text-align:center;
width:200px;
}
Or you can set the display to inline-block to support old dumb IE versions.
More Info:
Block-Level vs. Inline Elements
Alternatively, you can use a div to apply the width if you want.
You can use display: inline-block , if you use display: block you will have to float: left as well.
The span is an inline element, so the only way to change its width is to make it a block element or setting its display to inline-block. After doing this, you should float it to the left.
I hope this was of help.
The <span> element in an inline element. Therefore, you cannot apply width or height.