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>
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.
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.
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”.
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.
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With