I have some html as below- nothing fancy- just a div and a span
<div id="container">Some text to affect the width</div>
<span>A</span>
I'm using eric meyer's css reset. One of the things that he is doing is setting the line-height of the body to 1. Also, he is setting the font: inherit; for every element.
Then, I have a few other styles for the html elements above as follows:
body{background:#912FFF}
#container{background-color:#EDC1C1; width:150px;}
span{background-color:#35D9C4;}
Fiddle: http://jsfiddle.net/probosckie/5pb4794u/
The problem is that my span is overlapping with the div. If I zoom into the page it is all the more evident.
Im guessing is that line-height set to 1 and the font set to inherit is messing this up. Can someone please confirm on this??
Set line-height:normal; in your body element. Setting the line-height to a lower value than its text height will cause overlapping.
Unfortunatly inline element's padding and margins aren't designed for exact pixel layouts, but for the flow of text. In this case You should use a div instead of the span element or put the span inside a div.
Related
When inspecting the elements with block style here, CDT shows the height property as dimmed:
http://s.codepen.io/WhitneyLand/debug/zGpZbN
The docs say dimmed means inherited property that is not affecting the element, however clearly the height value is inherited, but is affecting the element.
So, how are we supposed to trace the source of a style like this using CDT?
/* full example http://s.codepen.io/WhitneyLand/debug/zGpZbN */
<div class="block block-fixed">
aaa
</div>
This is occurring because that height is calculated from the contents of the div. Namely, the 'aaa' text. Adding a font-size: 40px; to the .block-fixed class grows the calculated height to 47px. In this case it's dimmed because it's calculated.
The height you are seeing is a computed style property (computed via the browser's rendering engine), not a declared/inherited one. You'll notice when you hover over the total element in the DOM inspector, the "height" of the div is 19px - 18px tall and 1px bottom border.
I was playing around with the line-height property from the following site:
http://www.w3schools.com/css/tryit.asp?filename=trycss_float6
div.container
{
width:100%;
margin:0px;
border:1px solid gray;
line-height:150%;
}
I tried to understand about line-height and I read this:
On block level elements, the line-height CSS property specifies the
minimal height of line boxes within the element.
From:
https://developer.mozilla.org/en-US/docs/CSS/line-height#Examples
But interestingly in the example above from w3schools, changing the line-height property will increase the size of the containing div element which seems to be contradicting with the statement made in mozilla site. Hence I would appreciate greatly if any can offer clarification what actually a line-height does.
Thanks
line-height is actually given when we want to align the block elements in between along y-axis.
Forexample, i have a singled line text in w3schools and para height is 20px. The paragraph will be written in its own default way but if i use line-height equals the height of the paragraph then text in say W3schools will be aligned in the middle along y-axis. While if you want to horizontally align (x-axis align) your text then text-align:center is used for this purpose.
Remember, line-height do not totally depend on the height of its own element height. But it changes as follows.
If you have a single line text, height is 20px then give line-height: 20px to vertically align the text or vertically middle of text.
If you have a two line of text, height is 20px then give the line-height:10px and with the small padding-top to vertically align the text.
I hope this will lift you up. And i think you will not need to browse google more. If more you want explanation then i will give you jfiddle code. :)
It's not contradictory. Setting the line-height property on a div will apply the same line-height property to all inline children. So in your example, by setting the line-height property on the div, any child elements that are display: inline will have the new line-height applied to them. When the height of those child elements is increased, the height of the parent div increases to be able to contain the child elements.
http://jsfiddle.net/antonpug/jfrNt/
I am trying to make all the buttons the same size, and I am setting width to 100, but it doesn't do anything. Ahh! So frustrated...
modified a bit,
you need to use percentage and set it in the <li>
make the <a>'s display:block to fill in the whole <li>
added box-sizing:border-box (CSS3) to include the border in width calculation
replaced display:inline with float:left. elements styled with display:inline CANNOT have dimensions (width and height) and top and bottom padding and margins will not move it away from the text baseline (not move it vertically). Elements floated left seem to automatically have display:block
changed IDs to classes since IDs can only appear once
You're setting width:150px on the #menu_item declaration which is targeting the id of menu_item. For one, you can't have more than one element in a page with an id="menu_item" attribute.
What you need to do is set the tag inside those divs to display:block as it is by default an in-line element, then you can specify a width on it.
Don't use the same ID multiple times.
You can't set a width or margin on inline elements.
Here's an updated jsFiddle with the following changes:
Changed to .menu_item class.
.menu_item is now display: inline-block.
.menu_item a is now display: block.
I'm not sure if the margin on the top is supposed to be there, but you can remove that if you want.
This works if you want fixed widths, JSFiddle
had change your divs to use class not id,
.menuitem is now display: block and float: left;
.menu has a min-width to prevent wrapping of the menu items.
Driving me crazy...
Overlay-thats-absolutely-positioned
Span/anchor/image-thats-absolutely-positioned
span and anchor are set to width:0;height:0;margin:0; and still they offset the image by a few pixels
(if you highlight the overlay it's obvious)
CSS Gurus??
http://jsfiddle.net/danielredwood/aBWn6/1/
Just add display: block; to their CSS. The width and height are ignored for inline elements.
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.