I can't figure out why but 2 extra pixels are added to the height of a span element. Here is an example:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span style="font-size:20px;line-height: 20px">
test
</span>
</body>
</html>
In chrome debugger tools the span has a height of 22 pixels. If I change the test element to a div the extra pixels go away.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div style="font-size:20px;line-height: 20px">
test
</div>
</body>
</html>
here is a fiddle with the span and the div elements
JSFiddle
It happened, because span is an inline element and it's height is set to auto. Set display property to inline-block, for example, and span will take exactly the height you want it to take.
<div style="font-size:20px;line-height: 20px">
test
</div>
<span style="display:inline-block;font-size:20px;line-height: 20px">
test
</span>
Related
This is a normal div
<div>First div</div>
I do this in order to change the height.
<div height="150">
First div
</div>
But nothing happens. I don't see the div taking more than it's usual height.
What might me going on that I'm not seeing?
This is the complete code:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div height="150">
First div
</div>
<div>
Second Div
</div>
</html>
Instead of using height attribute, which is deprecated on most HTML elements, you can simply use inline CSS, like in this demo:
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="height: 150px">
First div
</div>
<div>
Second Div
</div>
</html>
You should use inline CSS for this purpose.
<div style="height: 150px">
First div
</div>
You should try CSS, HTML element's height and width apply on the table only.
<html>
<head>
<title>Probando</title>
</head>
<body>
<div style="background:#CCC;height:150px">
First div
</div>
<div>
Second Div
</div>
</html>
Pure html - use <br> as many times as div height is enough (no per-pixel precision)
<div>
First div<br><br><br><br><br><br><br><br>
</div>
<div>
Second Div
</div>
Now I am faced very weird html problem.
When I make html code as below the div has some height (maybe 20px or 18px ...)
<html>
<body>
<div>
<img>
</div>
</body>
</html>
But when i put this div in iframe as below, it has no height (0px)
<html>
<body>
<iframe>
#document
<html>
<body>
<div>
<img>
</div>
</body>
</html>
</iframe>
</body>
</html>
It seems difference is only whether putting div into iframe or not.
But the second code's div has no height. I don't know why div has no height.
Please let me know what is problem and how to fix it.
Thanks
I'd like to align two divs next to each other, and have them scroll across the screen from right to left. I know how to do this for a single piece of text enclosed in paragraph tags, but would like to do this for the two divs. Is that possible? Thanks.
Check this example code -
<!DOCTYPE html>
<html>
<head>
<title>HTML marquee Tag</title>
</head>
<body>
<marquee>
<div>
<div style = "float:left">
DIV 1 DATA
</div>
<div style = "float:left">
DIV 2 DATA
</div>
</div>
</marquee>
</body>
</html>
I'm creating a landing page, with an image with text over it.
I have the div that contains the text as a child div to the image div, and the image uses viewport height to fill the whole screen, however as soon as I insert text in the centered child div, for some reason the image gets resized in height, and there's uneeded scrolling space. I have tried different display types, and everything.
I've made an example, one with the div that shows the text and one without
With text and extra scrolling space: http://jsfiddle.net/g7ch1p0j/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
Without text and no scrolling space between the image and content below it: http://jsfiddle.net/sctcebmf/
<!DOCTYPE html>
<html>
<head>
<title>Ekchö</title>
<link href="global.css" rel="stylesheet">
</head>
<body id="body">
<div id="header_bg">
<div class="fluid_controller">
<div id="header_text">Ekchö</div>
</div>
</div>
<div id="lander">
</div>
<div class="fluid_controller">
<div id="content"></div>
</div>
</body>
</html>
You'll see the text moving upwards a little bit (grab the scrollwheel and drag it down slowly) before you see the end of the image (black box) and that's because of the extra issue. This does not appear in the second example.
Got your fiddle working as expected by changing #lander_meta's position to absolute, adding width:100% and making its p tags text-align: center.
Working fiddle.
Given the following HTML code:
<html>
<body>
<head>
<style>
#myDiv{
background:orange;
width:300px;
}
.a{
margin:5px;
background:purple;
}
</style>
</head>
<body>
<div id="myDiv">
<p class="a">A<br>A</p>
<p class="b">B</p>
</div>
</body>
</html>
Why is it that when I add float:right to .a, the myDiv shrinks?
Would you agree with my answer?
Because CSS floats are positioning properties. The paragraph
referenced to as 'a' is positioned with a float CSS property and
breaks out of the flow of the div 'myDiv'. That's why the 'a' element
is positioned at the right corner of the div 'myDiv'. The browser
renders 'myDiv' without the floating paragraph 'a'. That is why the
browser only draws a background behind the node value of the paragraph
referenced to as 'b' and stretches it 300 pixels wide, following the
CSS declaration of the html head element.
you may like this
<div id="myDiv">
<p class="a">A<br>A</p>
<p class="b">B</p>
<div style="clear:both;"></div>
</div>