Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS/HTML: indent whole block of text containing hard returns

I want to indent a block of text--all the text, not just the first line--a pretty common thing in layout and word processing programs and am finding this surprisingly difficult with CSS.

I tried margin-left, padding and text-indent without success. By combining margin-left with display:block-inline, I managed to get the block to indent but the display:block-inline adds a space above the block which throws off layout and generally looks bad. Apparently, another approach is <blockquote> but that is deprecated. Can anyone suggest a way to do block indent with CSS? Also I am trying to keep code lightweight so don't want to do a complicated styling of lists as this fits into a larger page.
works fine except for this issue. Thanks:

Following code indents block but inserts space above it.

html

Colors:<br>
<span style="display:inline-block;margin:1em;">
blue<br>
orange - complement to blue<br>
red<br>
purple - blend of red and blue</br>
</span>
like image 711
user1904273 Avatar asked Oct 09 '13 12:10

user1904273


People also ask

How do I indent a block of text in CSS?

You can use the CSS text-indent property to indent text in any block container, including divs, headings, asides, articles, blockquotes, and list elements. Say you want to indent all div elements containing text on a page to the right by 50px. Then, using the CSS type selector div, set the text-indent property to 50px.

How do you indent a whole text in HTML?

Use margin-left if you want the entire paragraph to be shifted to the right. If you want the entire paragraph to be shifted over, not just the first line, then you can use the margin-left property.

How do you indent all text lines in CSS?

Indent All the Lines of Block in HTML using CSSUse padding-left property. This is how it looks like. You can also use the margin-left here. But you should understand the difference between “padding” and “margin”.

Is HTML sensitive to indentation?

No. HTML code does not need to be indented, and all browsers and search engines ignore indentation and extra spacing. However, for any human reader, it's a good idea to indent your text because it makes the code easier to scan and read.


1 Answers

It inserts space because you're setting margin to each side of the span (top, left, right, bottom).
Change the style of the span to this:

display:inline-block;margin-left:1em;
like image 186
matewka Avatar answered Sep 27 '22 19:09

matewka