How to create an empty block?

Asked

Viewed 3,362 times

5

How do I create an 800px high EMPTY+TRANSPARENT block per 1000px width? And because the code below doesn’t work for that?

html

<div class="block"></div>

css

.block {
 height: 800px;
 width: 1000px;
}

With that, I’m trying to create spaces above and below the div .vitrine:

<div class="block"></div>
<div class="vitrine"></div>
<div class="block"></div>
html css div empty
  • 1

    the code you posted works, you want it transparent ? for what ?

  • take a look: http://jsfiddle.net/qnF3p/

  • For example, to create an empty area. But also to learn more about html and css. Around the 2000s I used a transparent gif for cells to get the size I wanted. I thought this was no longer necessary.

  • good, with the background-color works. I can use an opacity later to leave transparent. Color, or some fill make the turn of the transparent gif. Curious. Thanks!

  • without background-color also works, check it out: http://jsfiddle.net/qnF3p/3/

  • how strange. does not work with the code below... wanted to create a space before and after the display case <body> <div class="block"></div> <div class="display case"></div> <div class="block"></div> </body> &------- . display case { height: 350px; width: 100%; background-color: #222; } . block { height: 800x; }

  • a "p" is missing at class block - . block { height: 800px; } http://jsfiddle.net/qnF3p/4/

  • this p now was not in the code but really works what I wrote up there. Thanks for the help!

Show 3 more comments

1 answer

3

You do not need invisible elements to create these spaces. In the case of your last example, simply apply margins in the div .vitrine:

<div class="vitrine"></div>

.vitrine { 
    height: 350px; 
    width: 100%; 
    background-color: #222; 
    margin-top: 800px;
    margin-bottom: 800px;
}

You can simplify the CSS of the margins as well:

margin: 800px 0; /* top/bottom = 800px, left/right = 0 */

http://jsfiddle.net/bL9qG/

  • Perfect, it works in this case that I mentioned above. But suppose the window repeats at another time on the page where there should be the 800px?

  • In this case, the margins would not belong to the window even. But they may belong to some other element. My point is that nowadays you hardly need to use an invisible element as a spacer. If you want, update your question with a concrete and more complete example of the problem, and I update the answer with a more targeted suggestion.

  • I have nothing concrete in mind, I’m understanding how some relationships work to be able to play a little. I was creating this here http://www.arslab.com.br/lab/effects/compliance/teste.php

  • Got it. In this case it seems to make sense your block right there. I would create 3 classes instead of one (single, double and triple block). And you can combine classes and make names more semantic. You could have <div class="triplo transparente"></div>. This could be used in all colors.

Browser other questions tagged html css div empty

You are not signed in. Login or sign up in order to post.