2

I've recently come across a website and found that between most divs a comment block is being used to 'push' the elements down. In my mind this is not the correct way to do it, but is it acceptable to do it commercially?

HTML

<div class="layout__item">

    </div><!--

    --><div class="layout__item">

    </div><!--

    --><div class="layout__item">

</div>

CSS

.layout__item {
    display: inline-block;
    padding-left: 22px;
    vertical-align: top;
    width: 100%;
}
ultranaut
  • 2,132
  • 1
  • 17
  • 22
John Cooling
  • 405
  • 4
  • 23
  • They are pushed down because of width:100%, and not because of the comment block. Also bare in mind that the wordpress editor automatically wraps everything inside

    tags, taht means that if you go on a new line, it closes the previous

    and opens a new one, resulting in new line

     – Nick Apr 30 '15 at 15:16
  • Yes this is a wordpress site – John Cooling Apr 30 '15 at 15:17
  • http://stackoverflow.com/a/14776780/1654265 – Andrea Ligios Apr 30 '15 at 15:25
  • I wonder this is just for asking why! Because you have width:100%, so the items are in rows, which exactly acts like `block`, however you'll have to deal with the white spaces, what is the point. – Stickers Apr 30 '15 at 15:33
  • I asked why because I'm actively learning about HTML & CSS and was unaware of why this had been done. I have an answer now which has made everything much clearer of why the developer had done this. – John Cooling Apr 30 '15 at 15:35
  • That makes sense then. But don't do that in real cases :) – Stickers Apr 30 '15 at 15:37

1 Answers1

2

The comments aren't there to "push the elements down", but to keep whitespace out of the rendered output while keeping the html readable. The key there is the display: inline-block in the css—without the comments between each of the layout_items, the whitespace separating each of the tags in the source would find its way into the rendered output, which is usually not what you want in that situation.

There's a more in-depth discussion of this issue at https://css-tricks.com/fighting-the-space-between-inline-block-elements/

ultranaut
  • 2,132
  • 1
  • 17
  • 22