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? 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. <br> works fine except for this issue.
The 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>
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;