let me show the code for this webpage first and try to explain what I am asking.
h1 {
border: solid;
padding-top: 0px;
margin-top: 0px;
}
body {
padding: 0px;
margin: 0;
}
<!doctype html>
<html lang="en-US">
<head>
<title>Practice1</title>
</head>
<body>
<h1>Sample H1 Header</h1>
</body>
</html>
What I am trying to accomplish is to have the H1 header just barely touch the top and bottom borders that surround it.
Now, I am aware that the issue is line-height. Since I have a descending character (the "p" in "Sample H1 Header"), the bottom half is just right. However, the top half isn't.
I don't even understand why the default line-height has that extra space on top? I understand the bottom for descending characters like "p" and "q", but what characters require the extra space on the top? So understanding this, I guess, is my first question.
The second question is how to change the top half in my example so that the "Sample H1 Header" just barely touches the border I defined. I can change the h1 css to line-height: .7; and that will give me what I am looking for....expect then my poor "p" is sticking outside. So I want to keep the line-height on the bottom half at the default, but change it just on the top. In other words, how can I control the top and bottom half portion of line-height independent of each other?
I did find one solution. That's using the following in combination with the H1 header.
line-height: .7;
padding-bottom: 7px;
That gives me the look I am accomplishing. The problem with that solution, though, is I need to seem to adjust it manually if I decide to later change font-families and sizes. I would like something more automatic that I can simply apply whenever I need it without having to measure and modify for each case. Any ideas?
Or is there a way I can just turn "off" the top half of line height or have it adjust automatically to the tallest capital letter of the font and size I am using?
Thanks!
as we know every font has their own vertical space. So if you want only vertical space of font inside the border then you have to make line-height same as the font-size.
h1 {
line-height: 36px;
font-size: 36px;
}
Some font have more vertical space at top so you have to manage that space using padding as required.
Every font has their own vertical space which is exactly define the line height so the solution which you have is the best for the case .
Related
I am currently working on this website: http://mdftanzania.com. I am using Wordpress and headway101. I want to have a full width green background color that applies to the begin part of the page: About Us and Services. I add a div class to the part of the page where the green background has to be. I tried to style the div class to a full width green background, this didn't work out and at the moment only a part is styled now (see the website: http://mdftanzania.com).
I understand that there is another solutions, that is creating a container or widget above the container for the content, where I place the first part of the page text in. The problem with this is that it is confusing for my client where to edit the text in the page. The simplicity of Wordpress goes basically away then. Because of that, I am looking for a solution with CSS styling, so the client is only dealing with the 's.
Does anybody has a solution for this?
Since you have predetermined a padding to the content block, it is obviously affecting all the child elements that are contained in it, including the div with green background, which means that you should either remove that padding and apply it only to specific elements, or apply this simple CSS workaround to your div:
{
margin: 0 -25px;
padding: 0 25px;
}
This makes it, in your words, "full width" and applies a padding to its content.
You have this rule set in your css:
.block-type-content {
padding-left: 25px;
padding-right: 25px;
padding-top: 120px;
}
So children of this container, even though they may have a width of 100%, have to obey this padding of their parent. That's why you don't get a full width green bar. You might try negative margin-left and right to expand your green bar:
.color {
margin: 0 -25px;
padding: 0 25px;
}
At least in Firefox/Mac, this solves your issue.
Suppose, I have two div's: first - rectangle, filled yellow color and second with text "World wide web" and font-size 46px. I need set distance 39px between bottom of first div and top of the capital letter "W" in second div. I set margin bottom 39px in first div's CSS rule, and measure result on the screen. I got 43px. Can I exactly set this distance? (of cource, I can tune margin of first div and make several attempts to set this distance, but I need another way). Sorry for my English.
<!doctype html>
<html>
<head>
<title>
test page
</title>
<style>
html {
line-height: 1;
}
#first {
background-color: yellow;
height: 200px;
margin-bottom: 39px;
width: 200px;
}
#second {
font-family: "Myriad Pro";
font-size: 46px;
}
</style>
</head>
<body>
<div id = "first">
</div>
<div id = "second">
World wide web
</div>
</body>
</html>
You might need to set the padding of the text in the second div to {padding: 0}. Any padding that you have not accounted for will increase the appearance of the margin. Have you tried adding a background-color to #second and then measuring the margin?
I think that the space is part of the font. The size of second div, font-size and line-height all are 46px. Also, the space between them is also 39px as you can see here. So, if you want to set the space to be exactly 39px, you might have to search for or make a font which doesn't has that extra space.
OR
you can set line-height: 30px; in second div, which will move it upward. But as value depends on font-size, you will have to change it whenever you change font-size. Maybe using ems can solve that issue
EDIT
Values in em would be:
font-size: 2.87em;
line-height: 0.655em;
Now changing font-size in em to any value will keep the gap to 39px, i.e. margin-bottom of div#first
DEMO
please check out the codes first:
html:
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<div id="menu">
HOME
</div>
</div>
</body>
</html>
css:
#container
{
width: 80%;
margin: auto;
height: 450px;
}
#menu
{
background-color: #1b9359;
height: 25%;
}
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
.button:hover
{
background-color: #2cd282;
}
so what i would like to acheive is that when i hover to the home button, the whole div changes color, and does not get distorted or mispositioned on zoom. one answer told me that i could use display: block, but that it does not work as you can see. however, i did manage to make it work with display: block when the menu pane is like a vertical column and not a horizontal one. could anyone pls explain why this happens, and how display property of css affects that element? and how to achieve the full highlight without zoom distortion?
If you use percentages as your height and/or width then it will be a percentage of the parent container.
If you want your page to behave well when using a zoom, ie. ctrl + mouse wheel up or down, size everything in your page using em. 1 em = 16px by default. Just get used to using em. Get a calculator out and start converting things. Trust me, it's worth it to have a page that zooms straight in in out without jumbling.
Your outermost container may use percentages as long as you're using an auto margin for the central contents this is an exception to using em, that way things will still be centered on all resolutions. When I say outermost container, I mean body...
Before I tell you how to make it work I'll answer the other questions:
"...I did manage to make it work with display: block when the menu
pane is like a vertical column and not a horizontal one. Could anyone
pls explain why this happens, and how display property of css affects
that element?"
Block elements stack on top of each other vertically. This means that in a vertical arrangement if the zoom level is changed, those elements are perfectly at home taking that extra space up to the right side. Now, if they are intended to be lined up horizontally, display block will not work because that is simply just not what it does. Display inline-block will stack them horizontally preserving heights and widths set for the container, and to my own dismay, adding tiny margins between elements unlike the use of float, which would be touching the previous element, but float is definitely not something I would recommend for a nav menu.
Let's say you have your first link, and it is display:block. It will start its own new horizontal line, assuming there is not a float:(side) item before it with extra space to fill. In that case, you would add clear:both(or :left/:right) to overcome this. Now let's say you want to add a second link to the right of the first one which is display:block. The second one could be display:inline-block, and it would be on the same level as the first one, but if you did this the other way around, the second one, which is display:block, would start on its own new line below.
Now, to make your button do what you want it to do:
I will assume for the purpose of giving you a good answer that screen width in pixels is 1280px. So 80% of that is 64em. That is (1280px * .80)/16px = 64em because 1em = 16px. As I mentioned before, we do this to make your site elastic when it zooms.
You've previously designated #container as height:450px; So let's convert that. 450px/16px = 28.125em (em values can go to three decimal places, but no more) This is good, so we have an exact conversion, and not a rounded value.
container is now finished and should be as such:
#container
{
width: 64em;
margin: auto;
height: 28.125em;
}
Next change height in #menu. You have it as height:25%. That is 25% of 450px/or/28.125em If we leave it at 25% it will mess up the zooming. So let's convert. 28.125em/4 = 7.03125em
This time we must round to 3 decimal places. So we get 7.031em.
menu is now finished and should be as such:
#menu
{
background-color: #1b9359;
height: 7.031em;
}
Next is your button class.
.button
{
text-decoration: none;
float: left;
font: bold 1.2em sans-serif;
line-height: 115px;
margin-left: 20px;
display: block;
text-align: center;
}
At this point I lose some of my own certainty about how CSS will react, but I will start with this. Do not use float:left and Display:anything together. In this case, use display:inline-block. Get rid of the float:left. I am not sure why you have a line-height set. I am guessing it is your way of attempting to set a height for your button because it is 2.5px larger than the height of #menu (line-height of .button = 115px, height of #menu = 112.5px which we have already converted to 7.031em). If that's what you're trying to do you're doing it wrong. get rid of line height, and make it the same height as its container so that it fills it. height:7.031em;
I'll assume if you're making a horizontal menu, that you aren't trying to make one button take up the entire width. If you do not give it a width, it will fill the whole row. I'll be bold and guess you probably want your button somewhere in the ballpark of twice as wide as it is high. Let's just go with 15em(240px). width:15em;
Last is margin-left... 20/16 = 1.25em. Cake.
Now we have:
.button
{
text-decoration: none;
font: bold 1.2em sans-serif;
height: 7.031em;
width:15em;
margin-left: 1.25em;
display: inline-block;
text-align: center;
}
Keep in mind that block elements, whether inline or not, have little built-in margins on top of the margin-left that you've added.
If you make these changes, your page should zoom beautifully and your link will fill out its container vertically, but be a specified width to keep it clean. Never use px or percentages if you want to avoid zoom slop. The body container is 100% by default, but it holds everything and therefore the things in the center seem to grow outward toward the edges and therefore do not show any visible effect from the body not being set based on em, and it also makes the page naturally friendly with a variety of screen resolutions.
I hope this helps.
Edit:
As I mentioned, I lost some of my certainty. The line:
font: bold 1.2em sans-serif;
Does something that makes the container be larger than 7.031em removing that line fixes the problem, but I do not know the remedy if you insist on a font size of 1.2em. I tried setting height to 6.831em instead of 7.031em and it did not do the trick.
A few more tips:
1) If you still feel that you need a margin, perhaps margin-right would better suit you so you don't have random slack space to the left.
2) The CSS I provided does not adjust for the vertical alignment of your link text; to fix it add line-height:7.031em; to the .button class. Note: this method only words with single lines of text!!!
For the past few days, I've been struggling with some odd spacing on a website I'm building. Originally, I thought it was a display issue with Chrome, but I've been able to duplicate the problem in IE8, IE9, Firefox and Safari. I'm using old school HTML/CSS for backwards compatibility, so I can say it's not IE handling of HTML5 or some other bleeding edge update.
While some of the solutions on line have led me to try different things including floating the hedad, nothing's been successful & I always have padding on one of the long sides.
I have stripped this down to the BAREST of essentials to reproduce the problem, and have included a screen shot of the padding I can see on my end. I would certianly appreciate another set or seven of eyes showing me what I missed.
EDIT: line height turned out to the the culprit on this one, but vertically aligning the image to top per suggestion left the text at the top of the div. My sense would be that the header tag would preserve the default value, but that the and the img tag within the header would override that. Or can I only have one vertical align per div?
Second, is there a way to collapse line-height with CSS?
HTML CODE
<html>
<head>
<title>Test</title>
<LINK rel="stylesheet" href="test.css">
</head>
<body>
<div id="header">
<img src="bluespacer.gif" height=125 width=400>
TEST
</div>
</body>
</html>
CSS CODE
#header {
font: serif;
color: blue;
background-color: gray;
}
My output looks like below
and here's the bluespacer.gif; 1px x 1px. Look close, it's like a dust speck!
( ) <---
You're looking at the wrong spot. It's not padding but line-height, that generates that white space.
Try to vertically align the image:
#header img {
vertical-align: bottom;
}
Explanation: In the default style, the image is placed on the baseline of text. That is, the lower edge aligns roughly with the lower edge of, say, the letter 'x'. But because text has descenders (like 'g' or 'j'), the surrounding box is drawn higher, which leads to the extra space below the image.
It's a weird issue. You can do this.
#header img { line-height: 0; }
#header img {
display: block;
}
How do I specify the height of the blank line that inserting a <p> creates?
In your style sheet, or style sheet section, define this: (example)
p { margin-top: 0.6em; margin-bottom: 0em; }
You can also specify it in the individual tag <p style="margin-top:.....">
Use CSS to mark the line height for something. E.g.:
p{
line-height: 1.4;
}
That is for lines of text. To make a margin (The room between the and everything else) define it like this.
p{
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
}
That will adjust the blank space in each direction (accordingly).
I'd like to note that changing the margin of a single line doesn't help, so one may not see the effects in the browser as quickly as they expect. For example:
<p style="margin-bottom:50px">line 50</p>
<p style="margin-top:100px">line 100</p>
results in the margin of 100 px between these lines. 50px margin overlaps the bigger one and the bigger value is the actual margin. Reducing bottom margin of the first line doesn't change anything, as well as increasing it to the value <=100px. So this works differently than line spacing before and after in text editor.
Tested in Firefox with Firebug, where yellow area denotes margins.
change the top and bottom margin heights.