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;
}
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;
}
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;
}
Like the title, I want to vertical align center a <a> inside <ul><li>. Here the jsfiddle
Due to the fact you are specifying heights on both elements, this can easily be achieved by adding margin-top: 0.5em to a.
Like This
This is because the li has a height of 3em, the a has a height of 2em, so it needs half an em at the top to look vertically centered
Change the line-height of the a to match the line-height of the li.
a {
/*...preceding styles */
line-height: 3em; /* Elements line-height set to match parents */
height: 2em;
width: 5em;
text-align: center;
}
OR
Set the property vertical-align:middle on the a.
a{
/*...Other styles ommitted*/
vertical-align: middle;
}
Example http://jsfiddle.net/gvTLw/5/
You need to change the height and line-height of the a element to match the height of the li:
li {
height: 3em;
}
a {
line-height: 3em;
height: 3em;
}
Similar to Kevin's response, setting line-height on the anchor to inherit will do the same thing, without having to match the value manually
Fiddle
I have an issue with the sliding doors technique here. The heading right after the description is floating left due to the sliding doors technique, but all I want is that is stands alone in the center, above the products.
Can you help me understanding how to do it?
Here is the CSS I used for the heading:
h3.offer-title, h3#comments, h3#reply-title {
background:url(images/offer-title-bg.png) no-repeat right bottom;
color:#434343;
display:block;
float:left;
font-size: 14px;
margin-right: 6px;
padding-right:6px;
text-decoration:none;
height: 43px;
line-height: 0;
position: relative; }
h3.offer-title span, h3#comments span, h3#reply-title span {
background:url(images/offer-title-bg.png) no-repeat;
display:block;
padding-left: 20px;
height: 43px;
line-height: 43px;
padding-right: 16px;
}
Thank you.
It's floating because you set float: left in your first CSS code block. To get rid of that behaviour you need to get rid of the float.
Once the float is gone, if you want the header's background to nicely fit the text like it did before, the element needs to have display: inline-block.
But with display: inline-block and no set width on the header (you could add a width, but then it might break if you want to change the text or font size), it's not centered. To get it centered, you need a wrapper element around it which has text-align: center.
So:
Add this block:
h3.offer-title {
display: inline-block; /* this makes the bg fit the text */
float: none; /* this overrides float:left */
}
Wrap the offer-title element in another div.
Style the wrapper with
.offer-title-wrapper {
text-align: center;
}
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. */
}