How do I indent elements? Example in details


Tags: html,css,indentation

Problem :

http://htmlpocketreference.110mb.com/taggroups.html

For the site above, how would I indent all the code. I don't want it aligned with the paragraph and headings. I want it to be one indent level in. You can check my source if you want and the css is embedded in the html already.

Also, any suggestions on how to improve it?

(Note: I'm not publishing the site, I'm just practicing on getting all the formatting right.



Solution :

To indent each <code> block, you can use something like:

code{
     display: block;
     margin: 0 40px;
}

To indent only the first line of each <code> block,

code{
     text-indent: 40px;
}

40px is just a suggestion; you can adjust the indentation width to suit your visual needs.


    CSS Howto..

    How to import CSS from node_modules in webpack angular2 app

    How to php echo content into
    classes dynamicaly [closed]

    How to get inputs in the same line with css?

    How to display a table with a span at its side?

    div not showing above text box

    How to implement image sticker (ribbon) with css3

    How to limit a table cell to one line of text using CSS?

    How to create a sliding navigation with either jquery or css? [closed]

    How to retrieve the background image url defined in CSS?

    how to center UL in my page?

    How to use Ant to concatenate CSS files from external CSS @import file

    How to make a bullet of an image slider look different while is active?

    .NET - How to build themes for big CSS files

    How to delete HTML Elements in an iFrame using JavaScript

    How to style html element directly (inline)?

    How to prevent CSS inline style when Browser Zoom in?

    CSS Transition not showing with directive

    How to have different transition durations for css and angular transition on same element?

    How to animate a copy of the div from the current position to the top right

    How to put some divs in a row?

    How do I target a first-child that is visible (after children that are set to display:none), with only CSS

    How can I create this simple form example in HTML?

    How can I add CSS to a form in Rails when the form is rendered in two different locations?

    How to adjust the height of the footer automatically

    How can I get rid of the the gap below absolutely positioned content?

    What's the idea behind image sprites, how to approach it?

    How to use Javascript to check and load CSS if not loaded?

    How to make a rectangle mask with css

    Jquery CSS How To Use Margin: 0 auto

    How to change the border of an element when selected?