I don’t know why height css doesn’t with my div. It makes me crazy. Hope someone can help me out. Thank in advance
Here my code at Codepen:
http://codepen.io/anon/pen/fHzwh
Hi,
Can you point me to the element you are having problem and explain what’s wrong with it with as I can’t see from your codepen what the problem is?
I didn’t see anywhere that you had applied height to apart from a few anchor elements.
height:auto is the default and assuming you have contained the floats then the element will grow as required.
Hi Paul, please see pagination 
It’s due to the floating <li>'s in combination with the vertical padding of the <a>'s in the pagination.
You can try:
.pagination ul {overflow: hidden}
.pagination li {padding: 13px 0}
Because of the floats, the <li>'s are pushed out of the “normal flow” of the html; the ul {overflow:hidden} is taking back the height of the <li>'s, placing them inside the surrounding container.
Now the <li>'s have less height then the <a>'s (the <a> height is cut off), so they get the same vertical padding as the <a>'s.
Hi,
As Francky said the floated lists need to be contained which can be done with the overflow:hidden on the ul as already mentioned.
However, I would address the second problem slightly differently.
The problem with this code:
.pagination li a {
background: red;
text-align: center;
font-size: 12px;
color: #ffffff;
[B] padding: 13px 15px;[/B]
}
Specifically the vertical padding on an inline element cannot affect the flow of the line because that is controlled by the line-height. All that happens when you increase the vertical padding on an inline element is that the padding overlaps the line above and does not take part in the flow correctly. For vertical padding (or vertical margins) to have an effect on the flow the element needs to be a block display (or inline-block).
Therefore I would just float the anchors left and the full vertical padding will take effect which could be seen if you added a background colour to them. The difference between putting the padding on the list as in Francky’s example is simply that the anchor gets a bigger target area in my method. Which method you use depends on what effect you need and either could be classed as correct.
Yep; that triggers another possibility: just forget the vertical padding, and set the height of the items by the line-height:
.pagination ul {
overflow: hidden;
}
.pagination li {
float: left;
margin-right: 10px;
}
.pagination li a {
display: block;
padding: 0 15px;
color: #ffffff;
background: red;
font-size: 12px;
line-height: 300%;
}
- Aside: the {text-align:center} for the <a>'s can be missed (the horizontal paddings take care for that).
Thank you for useful information, now i understood that can’t apply padding to inline element. I adjusted display: inline-block to li, that work well. Which apply inline-block to li or a, which best way?
Thank you for supporting. My code work well now
As you can see there are often many ways to do the same thing and sometimes it doesn’t matter which way you go about it and some times it does. Whether you make the li display:inline-block or the anchor display:inline-block depends on whether you want the target area of the anchor to be bigger. Usually you would address the anchor so that any padding and borders and margins wil take effect on the anchor and the hit area of the anchor will include all those (vertical) properties rather than just shrink wrapping to text.
You could indeed set both to inline-block or both to float. Note that inline-block support is only IE8+ (for block elements) so you can avoid using the “inline block hack” (i.e. display:inline-block;*display:inline;*zoom:1.0) if you set the list to display:inline and the anchor to inline-block. IE7 and under support inline-block on inline elements without the hack I showed above.
Also note that if you float the list item and set the anchor to display:block then IE7 and under will stretch the item to 100% of the page width (when in haslayout mode) and you don;t get any horizontal alignment. Luckily support for IE7- is waning so its not so much of an issue these days.
Lastly you can also use line-height as Francky mentions and this will give you the line height without the need for padding. The only difference being that should some text wrap then it will create a block twice as high unlike the padding method where the text wraps inside the padding.
The line-height method is often useful for a nav where perhaps you have a stylised navbar at 40px height and then you could simply set all the inner elements to have line-height:40px and the text wil be vertically centred automatically with the added benefit that if text was zoomed it could expand without breaking out of the height of the box so easily. Using padding top and bottom on the internal elements would cause just one resize to break the text out of the box as there is no leeway.
These are all relevant points and which way you proceed often depends on the requirements at hand and what happens next
thank paul very much for very very useful information. Now i should use line-height for inline element, but i still feel vague about line-height, hope you help me understand clearly about it.
Please check code here:
why if put line-height to post title it will like margin top.
If you increase the line-height then yes you will get an effect that will move the text downwards as though a top margin had been added because line-height is the space above and below the inline-box (called half leading). Line-height is equally distributed above and below the content in that line so it will cause the line to move downwards to accommodate it and push content below it further away also.
The inline box model is indeed a [URL=“http://meyerweb.com/eric/thoughts/2008/05/06/line-height-abnormal/”]complicated beast when you delve into specific details but generally you can refer to it line-height as the space above and below the element in question. An element with line-height of less than 1 may in effect cause lines of text to overlap each other.
Russ has some slides here that may help.
as i remember, when font-size increase, line-height increase too, is that right?
No, not specifically.
If you have set the line-height in the body to 12px then any fonts greater than 12px that you set in your document will stick out of the line-height and overlap other content.
If you set the line-height in the body as 1.2em then that line-height will be 1.2 x default (usually 16px) so you get a line-height of 19px. If you set a different font-size for the body then the line-height will grow accordingly. However if you then have a p element that you give a font-size of 60px to then the text will stick out of the line-height and overlap other content as the line-height will still be 19px. It’s the fixed pixel height of 19px that gets passed down to any children and not 1.2em of the current elements font-size.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { line-height:1.2em }
p {
margin:0;
font-size:60px
}
</style>
</head>
<body>
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>
</body>
</html>
As you can see the text all overlaps and is unusable.
If you set the line-height in the body with a unitless value (say 1.2) then its this scaling factor that gets passed down to the children and the line-height will grow according to the font-size of the children.
Using the same code as above but with 1.2 instead of 1.2em and you can soon see the difference.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { line-height:1.2 }
p {
margin:0;
font-size:60px
}
</style>
</head>
<body>
<p>this is a test</p>
<p>this is a test</p>
<p>this is a test</p>
</body>
</html>
Therefore it can be seen that unitless line-height is a safer alternative as it grows or shrinks with the font-size of the current element.
If you do use unit values (ems/% or pixels) then remember that any time you give an element a font-size you must also give it a line-height.
thank you for very useful information. I have additional question. If i set the line-height in the body as 12px, then i must give an element a font-size (eg: 14px) i must also give it a line-height (eg: 28px), but does it plus default line-height (eg: 12 + 28)?
No the line-height you set on the element replaces the inherited line-height for that element. Bear in mind that line-height is a minimum and the line-height of other inline-boxes may cause the line-height to expand.