Is it ok to use br tags to do some breaks between elements?

1

I know br tags are used for new lines of texts. But i tried it between elements i.e. different boxes, and it seems to work. Is it ok to use it like this? Would browser read it well?
Here’s my HTML code:

<!doctype html>
<html>
   <head>
    <title>Something</title>
    <link rel="stylesheet" type="text/css" href="Index.css">
    </head>
    <body>
    
<div class="wrapper">
        
        <div class="service">
        <h2>Service 1</h2>
        <p>this is service 1</p>
        </div>
        
        <div class="service">
        <h2>Servie 1</h2>
        <p>this is service 2</p>
        </div>

        <div class="service">
        <h2>Service 1</h2>
        <p>this is service 3</p>
        </div>
<br>
    <br>
        <br>
            <br>
                <br> 
                   <br>
                      <br>
                         <br>
                            <br>
<div class="container">
        
        <div class="service">
        <h2>Service 1</h2>
        <p>this is service 1</p>
        </div>
        
        <div class="service">
        <h2>Service 2</h2>
        <p>this is service 2</p>
        </div>
        
        <div class="service">
        <h2>Service 3</h2>
        <p>this is service 3</p>
        </div>
           
</div>
        
        
    
    
    </body>
</html>

This is how it looks like in a pic:

[Album] Imgur

As you can see i moved nested container with brownish background color down bellow the text above it (services).

1 Like
2

You can, but it’s not really the best way to do it.

3

Can you explain better ways to make it work? Im new in layouts, i have already almost had a mental breakdown from trying to aling items in a document for three days now.

4
1 Like
5

There are a few ways you could go about it, I think it partially depends on how you would want items to flow when thinking about responsive design.
But I would agree, generally this is not the best way to do things.

I am not able to see your current css but one potential way be to have your container div use something like:

.container {
    position: relative;
    top: 50px;
}

You would need to experiment with that more to get it to look the way you want it to.

I would also suggest looking through the free code camp beta HTML/CSS sections.
I think it has been tested pretty well and could really help you with these concepts.
It does not save your progress, but the content is really well put together.

1 Like
6

Positioning is good, yet can be a pain in the butt. You could accomplish the same thing with margins.

.wrapper {
  margin-bottom: 40px;
}

or

.container {
  margin-top: 40px;

or just use one br tag and specify it as a line spacer:

<br class="spacer">

br.spacer {
  margin-top: 20px;
  margin-bottom: 20px;
}
1 Like