Code Article Detail Where Image Lays Out of Grid With HTML/CSS

Have you ever read article, where some content, usually image, lays out of grid? Let's see how this effect can be achieved.

This is a little excercise of not so often used CSS selectors. First is universal selector “*”, which selects all the elements.

Universal selector is sometimes used alone to provide simple CSS reset:

* {
     padding:0;
     margin:0;
 }

but it is completely fine to use it more specifically to target all elements in only some concrete HTML tag.

The second one is child combinator “>”. It mathes only direct children of the first selector. Check the CSS tab to see, how it is used.

Image Lays out of Grid

You might have a question, if child combinator is necessary, if you remove it, example still works fine. This is only because of the simplicity of HTML markup.

If there is more complex HTML structure, e.g. you have got links with “a” tag, or bold text with “strong” tag inside a paragraph, layout would break.

Left padding would apply not only to the paragraph, as a direct child, but also to the inner tags, as grandchildren.

Note: If you don’t see the effect, open the page in bigger window. In CSS tab, styles for small devices are declared, which reset the padding to show elements nicely one by one.