I have the following HTML chunk:
<span class='instruction_text'>
Line 1<br>
Line 2
</span>
And the CSS declaration of instruction_text is:
.instruction_text {
margin-left: 70px;
font-style: italic;
color: #555;
}
The first line has a 70px margin as expected, but the next line starts with no indent. How can I make ALL of the lines indented?
Use a block-level element. <div> is block-level by default, but adding the CSS display:block to your instruction_text class should send you in the right direction.
Using BR tags inside a SPAN element doesn't make a lot of sense as SPAN in an inline element which means it's meant to be used in the flow of a line of text or other inline elements.
You really should be using an element that is a "block" level element like DIV or P, e.g. one that is designed to contain multiple lines of text (or inline elements).
As you'll have noticed, you CAN use a BR tag inside a SPAN and it will cause a line break, however inline elements don't play well with margins/padding etc.
Related
With respect to vertical-align, W3C spec says:
The following values only have meaning with respect to a parent inline
element, or to the strut of a parent block container element.
What's the meaning of parent inline element here? Is it the first inline element inside a container? If yes, why is it called "parent"?
Best explained with an example, I think.
.bar {
vertical-align:-20px;
}
.baz, .qux {
vertical-align: text-top;
line-height:30px;
}
<div>foo
<span class="bar">bar
<span class="baz">baz</span>
</span>
<span class="qux">qux</span>
</div>
All the spans and text content are part of a single line box. The div establishes the inline formatting context, the line box and its strut.
The "foo" text sits on the baseline with respect to the strut's baseline.
The .bar span is offset with respect to the strut's baseline by 20px.
The .baz and .qux spans have the same styling, where the top of their upper half leading is aligned with the top of content area of their "parent". But you can see that they are not aligned with one another.
That's because the .qux span is aligned with respect to the strut, but the .baz is aligned with respect to its parent inline element, that is, the .bar span element.
I'm currently wondering about the following problem: I have for example a simple header H1 with a SPAN tag inside which I want to style differently by CSS depending on the position of the SPAN element, meaning I need to detect if the span element is in line with the text node content of the H1 tag or is pushed to a new line because it doesn't fit in the line.
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Is there anybody out there having a good idea or even a solution to this?
Javascript
Just use javascript to add/remove class if element is or is not wrapped.
JSFiddle
CSS
But if you really want to use just css then you can try with this problematic solution:
Use ::first-line pseudo element to style header and then style span as rest of h1. The problem is that it could style also your header if it would wrap at some point.
h1::first-line {
color: black;
}
h1 {
color: red;
}
<h1>
This is a header
<span class="special">Special content</span>
</h1>
Sadly, CSS does not have any complex mechanism for managing lines.
im trying to display things inline using css that should be right next to each other i.e.
PART1 part2
instead of
PART1
part2
my code is here
http://jsfiddle.net/4EtAf/6/
thanks
You need to add inline to the H2 tag. The header is a block level element, which will place a break before and after.
.question_area h2
{
display:inline;
}
The A tag is inline by default.
You can also float them, but that is overkill in your case.
You applied the inline css style to the div, not the h2 or a elements. The div will display inline with other divs however :)
Simply add
h2 {
display:inline;
}
You should give the inline style to the h2 elements:
h2 { display: inline; }
The inline property is not referred to the element being contained but to the element itself. An header tag will be display: block by default, and this makes sense since it should be an header.
http://jsfiddle.net/4EtAf/8/
You need to display the h2 inline.
You could add a right margin to the <h2>
http://jsfiddle.net/4EtAf/10/
Try this:
<div class="question_area">
<h2 style="display: inline-block;"> this is the question</h2>
google
</div>
Does anyone have an idea how to align the second line?
span.info {
margin-left: 10px;
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight: bold;
}
<span class="info"></span>
display:block;
then you've got a block element and the margin is added to all lines.
While it's true that a span is semantically not a block element, there are cases where you don't have control of the pages DOM. This answer is inteded for those.
<span> elements are inline elements, as such layout properties such as width or margin don't work. You can fix that by either changing the <span> to a block element (such as <div>), or by using padding instead.
Note that making a span element a block element by adding display: block; is redundant, as a span is by definition a otherwise style-less inline element whereas div is an otherwise style-less block element. So the correct solution is to use a div instead of a block-span.
span is a inline element which means if you use <br/> it'll b considered as one line anyway.
Change span to a block element or add display:block to your class.
http://www.jsfiddle.net/tZtpr/1/
<!DOCTYPE html>
<html>
<body>
<span style="white-space:pre-wrap;">
Line no one
Line no two
And many more line.
This is Manik
End of Line
</span>
</body>
</html>
try to add display: block; (or replace the <span> by a <div>) (note that this could cause other problems becuase a <span> is inline by default - but you havn't posted the rest of your html)
Also you can try to use
display:inline-block;
if you would like the span element to align horizontally.
Incase you would like to align span elements vertically, just use
display:block;
You want multiple lines of text indented on the left. Try the following:
CSS:
div.info {
margin-left: 10px;
}
span.info {
color: #b1b1b1;
font-size: 11px;
font-style: italic;
font-weight:bold;
}
HTML:
<div class="info"><span class="info">blah blah <br/> blah blah</span></div>
tring to flow text around an image:
HTML
<div>
<span id="photo"><img src="photo.png"</span>
<span id="text">Lorem Ipsum, blah, blah, blah ...</span>
</div>
CSS
#photo {float:left;margin:0px 8px 5px 0px;}
#text {text-align:justify;}**
The text flows around the image, but it is not justified (alignment is left). If I float the text element left, then the alignment is correct (justified, as I want), but then the text does not flow around the image, rather it flows below the image - how can I fix this?
The text-align property actually belongs on the enclosing block element not the inline element. So move it to the enclosing block:
div { text-align: justify; }
See 16.2 Alignment: the 'text-align' property of the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification:
This property describes how inline
content of a block is aligned. Values
have the following meanings:
(emphasis added)
You need to either take the image out of the span, or float the span left.