I have one of my <a> links set to inline-block and there is some space added to the bottom of the containing div. I am not sure how to get rid of this and was wondering if someone could help.
Here is a fiddle: http://jsfiddle.net/RQ69r/1/
Thanks in advance.
You can fix that adding the following style to the inline-block element:
vertical-align: middle;
Demo
Why dont you change it to display: block; ?
Check the updated fiddle:
http://jsfiddle.net/RQ69r/3/
When you want more <a> elements next to each other (horizontal), you could use list-items and / or float:left;
This is the default behavior of inline-block elements. Set the parent div font-size: 0px;
DEMO http://jsfiddle.net/RQ69r/7/
.row_20 {
width: 20%;
font-size: 0px;
}
And set the correct font-size of the child element
.header .logo {
font-size: 13px; <-- set font size
height: 45px;
width: 100%;
display: inline-block;
background: blue;
}
Related
I'm switching divs from float:left to inline-block and don't know why some of the divs are displacing, like they have some invisible border or something.
Here are with float:left https://jsfiddle.net/f7op4dze/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
float:left;
margin:0 20px;
}
And here with inline-block https://jsfiddle.net/dfdxa5hc/
div{
background-color: red;
width: calc(25% - 40px);
height: 50px;
display:inline-block;
margin:0 20px;
}
There's a space automatically added with inline elements and this space is applied to inline-block as well.
If there's no whitespace (either a space or a return) between the elements in your markup, the inline-block elements will be rendered without a space.
The easiest way to do this and still retain optimal formatting is using comment tags in between the <div> elements like so:
https://jsfiddle.net/orvn/wd0ynq98/2/
<section>
<div></div><!--
--><div></div><!--
--><div></div><!--
--><div></div>
</section>
As one possible option to fix the problem, set the font-size of the parent to 0.
section { font-size: 0; }
You can restore the font on the child elements:
div { font-size: 16px; }
Demo: https://jsfiddle.net/dfdxa5hc/3/
For an explanation and other possible solutions, see my answer here:
inline-block boxes not fitting in their container
There is (finally) a CSS only solution to this problem
section {
display: table;
word-spacing: -2em;
width: 100%;
}
div {
display: inline-block;
word-spacing: normal;
}
this is my css:
body {
margin: 0px;
background-color: white;
}
#navbar {
background-color: red;
margin: 0 auto;
width: 900px;
height: 200px;
}
#navbar a {
padding: 20px;
color: grey;
text-decoration: none;
font-weight: bold;
font-size: 20px;
}
navbar is a div inside body and i have a couple of tags inside navbar.
this is the output:
there is a difference between the 'Block level' elements and 'Inline Elements'. The Margins & Paddings of 'Inline Elements' effect only in Horizontal Direction, but not in Vertical Direction, as per the basic concept.
Your Div was a block level element, but anchor tag is an inline element. To give vertical space make it a block element, as you've already found out OR put the anchor in a div, which has vertical space in form of 'padding' or 'margin'!
div a {display:block;padding:20px;} OR div a{display:inline-block;padding:20px;}
In later two cases, padding will now effect in vertical direction also, as has now converted to block-level element, from inline form. Hope, that helps!
I figured it out, I just needed to use: display:inline-block;
you can try like this: Demo
#navbar a {
display:block;
float:left;
}
What is the easiest way to align the text vertically here with CSS ?
<ul>
<li>Hello</li>
<li>Bye Bye</li>
<li>Ciao</li>
</ul>
li {
border: 1px solid black;
width: 100px;
height: 50px;
margin-bottom: 20px;
text-align: center;
}
If you have just one line of text, you can set the line-height to the same value as the height. This works for any element.
Hacky, but possibly the easiest way:
li {
display: table-cell;
vertical-align: center;
}
You will need to add a background image in place of the list item bullet.
If you know you're always going to center a single line you could match height and line-height
li {
...
height: 50px;
line-height: 50px;
...
}
Try the vertical-align property:
http://www.w3schools.com/css/pr_pos_vertical-align.asp
Putting a line-height and making a gap between text and the border is good. but this is not the best practice. because Line height is not for creating a margin or padding. It is for creating a gap between two text lines(gap between two lines of a paragraph).
So make your task is done, you have to put a margin or a padding. The better option is putting a margin( But this is not a alignment. Just putting a margin to top ). And also, put your text into a "p" tag or "span" tag( whatever a tag, which can use for wrap text ).
HTML code,
<ul>
<li><span>Hello</span></li>
<li><span>Bye Bye</span></li>
<li><span>Ciao</span></li>
</ul>
CSS Code,
ul li span {
margin-top: 5px;
}
If making verticaly align is must, Here is the code.
ul li {
position: relative;
}
ul li span {
position: absolute;
top: 50%;
font-size: 12px; /* change this as your need. */
line-height: 12px; /* keep this value same as font-size. */
margin-top: -6px; /* half value from the font-size. */
}
I need to make following code stretchable with predefined height
<style>
.title{
background: url(bg.gif) no-repeat bottom right;
height: 25px;
}
</style>
<span class="title">This is title</span>
But since span is inline element, "height" property won't work.
I tried using div instead, but it will expand up to the width of upper element. And the width should be flexible.
What's a good solution for this?
Give it a display:inline-block in CSS - that should let it do what you want.
In terms of compatibility: IE6/7 will work with this, as quirks mode suggests:
IE 6/7 accepts the value only on elements with a natural display: inline.
Use
.title{
display: inline-block;
height: 25px;
}
The only trick is browser support. Check if your list of supported browsers handles inline-block here.
this is to make display:inline-block work in all browsers:
Quirkly enough, in IE (6/7) , if you trigger hasLayout with "zoom:1" and then set the display to inline, it behaves as an inline block.
.inline-block {
display: inline-block;
zoom: 1;
*display: inline;
}
Assuming you don't want to make it a block element, then you might try:
.title {
display: inline-block; /* which allows you to set the height/width; but this isn't cross-browser, particularly as regards IE < 7 */
line-height: 2em; /* or */
padding-top: 1em;
padding-bottom: 1em;
}
But the easiest solution is to simply treat the .title as a block-level element, and using the appropriate heading tags <h1> through <h6>.
span { display: table-cell; height: (your-height + px); vertical-align: middle; }
For spans to work like a table-cell (or any other element, for that matter), height must be specified. I've given spans a height, and they work just fine--but you must add height to get them to do what you want.
Another option of course is to use Javascript (Jquery here):
$('.box1,.box2').each(function(){
$(this).height($(this).parent().height());
})
In some case you may want to adjust a SPAN height without changing display : inline.
To solve this, you can add a top and/or bottom border property, setting the required width parameter to your needs, and a transparent color to hide that border :
.myspan {
border-top : solid 3px transparent;
border-bottom : solid 3px transparent;
}
.my-span {
border: solid 1px;
border-color: gray;
border-radius: 6px;
padding-left: 5px;
padding-right: 5px;
height: 17px;
padding-top: 6px;
display: inline-block;
line-height: 0px;
}
Why do you need a span in this case? If you want to style the height could you just use a div? You might try a div with display: inline, although that might have the same issue since you'd in effect be doing the same thing as a span.
I tried to make a navigation inline list. You can find it here: http://www.luukratief-design.nl/dump/parallax/para.html
For some reason it does not display the width and height of the LI. Here is the snippet. What is wrong with this?
.navcontainer-top li {
font-family: "Verdana", sans-serif;
margin: 0;
padding: 0;
font-size: 1em;
text-align: center;
display: inline;
list-style-type: none;<br>
width: 117px;
height: 26px;
}
.navcontainer-top li a {
background: url("../images/nav-button.png") no-repeat;
color: #FFFFFF;
text-decoration: none;
width: 117px;
height: 26px;
margin-left: 2px;
margin-right: 2px;
}
.navcontainer-top li a:hover {
background: url("../images/nav-button-hover.png") no-repeat;
color: #dedede;
}
Declare the a element as display: inline-block and drop the width and height from the li element.
Alternatively, apply a float: left to the li element and use display: block on the a element. This is a bit more cross browser compatible, as display: inline-block is not supported in Firefox <= 2 for example.
The first method allows you to have a dynamically centered list if you give the ul element a width of 100% (so that it spans from left to right edge) and then apply text-align: center.
Use line-height to control the text's Y-position inside the element.
Inline items cannot have a width. You have to use display: block or display:inline-block, but the latter is not supported everywhere.
I think the problem is, that you're trying to set width to an inline element which I'm not sure is possible. In general Li is block and this would work.
Using width/height on inline elements is not always a good idea.
You can use display: inline-block instead
Remove the <br> from the .navcontainer-top li styles.
I had a similar issue trying to fix the item size to fit the background image width. This worked (at least with Firefox 35) for me :
.navcontainer-top li
{
display: inline-block;
background: url("../images/nav-button.png") no-repeat;
width: 117px;
height: 26px;
}