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>
Related
This question already has answers here:
Vertical-align with baseline and textareas
(3 answers)
textarea placement is wonky
(2 answers)
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 2 years ago.
I know that elements with display: inline-block with display: value-other-than-visible (can) make the baseline of their parent position at the bottom of the inline-block's hpbm (height, padding, border, margin).
Why does text-area seem to produce the same effect? I know most user-agents make it inline-block.
For example:
textarea {
height: 100px;
}
I am text.
<span>I am a span.</span>
<textarea></textarea>
div {
display: inline-block;
height: 100px;
}
I am text.
<span>I am a span.</span>
<div>I am an inline-block</div>
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
CSS vertical alignment of inline/inline-block elements
(4 answers)
Closed 3 years ago.
I have 3 divs placed side by side. When I'm trying to put a header (or any element) inside of the middle div (or any div), that div floats way down. Why does it do that?
CSS I used for divs:
div {
display: inline-block;
background-color: lightgray;
height: 600px;
width: 300px;
}
Add *{box-sizing:border-box} to your CSS. It defines how the width and height of an element are calculated.
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
This question already has answers here:
Center image inside div horizontally
(4 answers)
How to center image horizontally within a div element?
(23 answers)
Closed 5 years ago.
I am new to css and want to understand some basics. What is the need to set image display property as block to center it inside div ?
#logo {
display: block;
margin-left: auto;
margin-right: auto;
}
How does changing the display to block change the behaviour of img element inside div (how does it help center image)?
img is an inline element so setting it display: block will completely change how it flows on the page
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/