This question already has answers here:
width and height for a span does not show up unless a text is entered
(6 answers)
How to set height property for SPAN
(9 answers)
Closed 4 years ago.
In the following code, why doesn't span adhere to the height rule:
<div style="border:1px black solid">
inside div
<span style="height:300px">inside span</span>
</div>
http://scratchpad.io/hilarious-shirt-8130
You gotta put the next style to your span tag
display:inline-block;
If you wanna see the change put a background to your span
background-color: #f00;
Span is an inline element, which has neither a width nor height of its own. You would need <span style="height:300px; display:inline-block"> to get a styled height working.
See display:inline resets height and width
Related
This question already has answers here:
Applying a background to <html> and/or <body>
(2 answers)
Why does styling the background of the body element affect the entire screen?
(7 answers)
Closed 4 years ago.
Hi I'm newbie in HTML and CSS, sorry if my question sounds too basic:
I set background color to be green for element as the picture below shows:
You can see that the content of is currently 366*18, and according to W3C:
The background of an element is the total size of the element, including padding and border (but not the margin).
so green color should only apply on the content of whose size is 366*18, since the height is 18px, so the green color should only apply with a height of 18px, but why green color applies all the way down to the end of the page?
You want to target just the 'p' tag here.
Inline:
<p style="background-color: green"></p>
or CSS:
p { background-color: green; }
This question already has answers here:
Inline elements and line-height
(2 answers)
Closed 5 years ago.
CSS:
span{line-height:25px;}
HTML:
<div><span>16<br>Fri.</span></div>
However, the height of div is 49.6px and line-height is 24.8px.
Only one computer has this situation.
Other height is 50px.
How to fix?
You fix it by using display: inline-block.
Inlined elements can't be sized. Consider it as simple text you can only color.
span{
line-height: 25px;
}
<div><span>16<br>Fri.</span></div>
This question already has answers here:
What is the difference between HTML div and span elements?
(13 answers)
Closed 5 years ago.
When I use a css class within a div tag it seems to ignore what is inside the css.
.centered {
background-color: red;
padding: 5px 20px 5px 20px;
}
<div style="text-align:center" class="centered">
I am centered with bg around me
</div>
When is use the same class with a span tag nested within the div element it does what I want.
<div style="text-align:center">
<span class="centered">I am centered with bg around me</span>
</div>
Why is this? What makes the difference?
This is with the first code
This is with the second
<div /> is a block level element, which takes up 100 % of the available width by default. <span /> is an inline element, which only takes up the minimum amount of width it needs to display its content.
There's a really good article on learnlayout.com that does a great job explaining this.
Happy coding :)
Its because a span is a inline element and a div is a block element.
To see the difference you can make the span a block element by doing this:
.centered {
display: block
}
More about inline vs block
This question already has answers here:
CSS Margin Collapsing
(2 answers)
CSS Text Bottom Margin Ignored
(3 answers)
Closed 7 years ago.
I am using two divs, one on top with no content or height and the other below it with some content or just height. I wish to put some space between them and instead of using margin-bottom alone on the first div or margin-top alone on the second div I am evenly sharing the space between both, i.e. half the space on the first div's margin-bottom and half the sapce on the second div's margin-top. For some reason only one of the two seem to apply and the other is ignored.
Check out this example
http://jsfiddle.net/hkgq22x8/
body {
margin:0px;
}
.element1 {
margin-bottom:10px;
}
.element2 {
margin-top:10px;
border:1px solid #000;
height:30px;
}
<div class="parent">
<div class="element1"></div>
<div class="element2"></div>
</div>
try removing either margin-top on .element2 or margin-bottom on .element1, the space remains the same, but remove both and the space disappears.
This question already has answers here:
Shrink-to-fit div and paragraph, based on image?
(6 answers)
Closed 8 years ago.
I have a div with an img and a p tag. I want the div to "shrink-wrap" the image and let the text organically wrap. However, I'm trying to do this with absolutely no javascript or constraints (ie width=300px / 50% etc) as my frame needs to be fluid.
Here's an example of something similar to what I have now: How can I make the outer dive match the size of the "Google" image without using fixed sizes or javascript?
http://jsfiddle.net/pVF74/
div {
border:1px solid black;
display:table;
width:1%;
}
http://jsfiddle.net/pVF74/2/
Add display: inline-block; to your div's class.
Example here http://jsfiddle.net/r9rLr/