Spacing between images

Asked

Viewed 6,278 times

2

I’m not getting space between images using this <div>

<div class="col-xs-12">espaço entre as imagens</div>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="servicos">
  <div class="container">
    <div class="row">
      <div class="templatemo-line-header">
        <div class="text-center">
          <hr class="team_hr team_hr_left hr_gray" /><span class="txt_darkgrey">Nossos Serviçoss</span>
          <hr class="team_hr team_hr_right hr_gray" />
        </div>
      </div>

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/cachorro-independente.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE LIMPEZA</span>
          <p>Temos uma das melhores metodologias do mercado e todo equipamento nescessário para executar o trabalho de limpeza e conservação com excelência, visando facilitar a vida do cliente e tornar o ambiente agradavél e limpo, proporcionando conforto
            e simplificando o dia dia dos nossos clientes.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <div class="col-xs-12">espaço entre as imagens</div>

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/remedios-proibidos-cachorro-766x526.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE PORTARIA</span>
          <p>Utilizando um dos melhores métodos de treinamento do mercado e atualizando a mão de obra a anualmente, dispomos dos melhores profissionais para atender os mais diversos tipos de portaria e proporcionar maior sensação de segurança e confiança
            para o ambiente contratado.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE RECEPÇÃO</span>
          <p>Sabemos que uma calorosa e educada saudação de boas vindas no primeiro contato é primordial para um bom atendimento e comunicação com os clientes, com isso nós dispomos dos melhores e mais bem treinados profissionais para recepcionar todos de
            forma eficaz e educada.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="ihttp://petiko-blog-novo.s3.amazonaws.com/wp-content/uploads/2016/09/fatos-sobre-as-orelhas-do-seu-cachorro-6.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE PORTARIA VIRTUAL</span>
          <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas
            verdes e jardins de seu terreno.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="https://static.tudointeressante.com.br/uploads/2015/10/raz%C3%B5es-para-mimar-o-seu-cachorro-1.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE COPA</span>
          <p>Dispomos de copeiras e garçons da mais alta competência para realizar as mais diversas atividades com discrição e eficiência, tanto para eventos ou rotinas diárias. Além de servir e manter o estoque em ordem eles também tem o compromisso de
            manter tudo higienizado.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://barkpost.com.br/wp-content/uploads/2014/11/whatthepup.png" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE JARDINAGEM</span>
          <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas
            verdes e jardins de seu terreno.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://dicas.guiamais.com.br/wp-content/uploads/2017/03/nomes-de-cachorro.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE CFTV</span>
          <p>Circuito Fechado de Televisão (CFTV), é um sistema de TV que distribui sinais de câmeras colocadas em locais específicos, para um determinado ponto de supervisão. O CFTV não é aplicado somente com propósitos de segurança e vigilância, mas também
            em escolas, empresas e até na medicina.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <div class="clearfix"></div>
      <div class="templatemo-gallery-category" style="font-size:16px; margin-top:80px;">
        <div class="text-center">

        </div>
      </div>

2 answers

0

Just put a margin on your div. I created the class espaco that puts a 60px margin above and below the div. Follow the code below.

.espaco{
    margin: 60px 0;

}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="servicos">
  <div class="container">
    <div class="row">
      <div class="templatemo-line-header">
        <div class="text-center">
          <hr class="team_hr team_hr_left hr_gray" /><span class="txt_darkgrey">Nossos Serviçoss</span>
          <hr class="team_hr team_hr_right hr_gray" />
        </div>
      </div>

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/cachorro-independente.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE LIMPEZA</span>
          <p>Temos uma das melhores metodologias do mercado e todo equipamento nescessário para executar o trabalho de limpeza e conservação com excelência, visando facilitar a vida do cliente e tornar o ambiente agradavél e limpo, proporcionando conforto
            e simplificando o dia dia dos nossos clientes.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <div class="col-xs-12 espaco">espaço entre as imagens</div>

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/remedios-proibidos-cachorro-766x526.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE PORTARIA</span>
          <p>Utilizando um dos melhores métodos de treinamento do mercado e atualizando a mão de obra a anualmente, dispomos dos melhores profissionais para atender os mais diversos tipos de portaria e proporcionar maior sensação de segurança e confiança
            para o ambiente contratado.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://tudosobrecachorros.com.br/wp-content/uploads/precos-de-cachorro.png" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE RECEPÇÃO</span>
          <p>Sabemos que uma calorosa e educada saudação de boas vindas no primeiro contato é primordial para um bom atendimento e comunicação com os clientes, com isso nós dispomos dos melhores e mais bem treinados profissionais para recepcionar todos de
            forma eficaz e educada.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="ihttp://petiko-blog-novo.s3.amazonaws.com/wp-content/uploads/2016/09/fatos-sobre-as-orelhas-do-seu-cachorro-6.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE PORTARIA VIRTUAL</span>
          <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas
            verdes e jardins de seu terreno.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="https://static.tudointeressante.com.br/uploads/2015/10/raz%C3%B5es-para-mimar-o-seu-cachorro-1.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE COPA</span>
          <p>Dispomos de copeiras e garçons da mais alta competência para realizar as mais diversas atividades com discrição e eficiência, tanto para eventos ou rotinas diárias. Além de servir e manter o estoque em ordem eles também tem o compromisso de
            manter tudo higienizado.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://barkpost.com.br/wp-content/uploads/2014/11/whatthepup.png" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE JARDINAGEM</span>
          <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas
            verdes e jardins de seu terreno.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <!-- box -->
      <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
          <a><img src="http://dicas.guiamais.com.br/wp-content/uploads/2017/03/nomes-de-cachorro.jpg" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
          <span>SERVIÇOS DE CFTV</span>
          <p>Circuito Fechado de Televisão (CFTV), é um sistema de TV que distribui sinais de câmeras colocadas em locais específicos, para um determinado ponto de supervisão. O CFTV não é aplicado somente com propósitos de segurança e vigilância, mas também
            em escolas, empresas e até na medicina.</p>
        </div>
        <div></div>
      </div>
      <!-- box -->

      <div class="clearfix"></div>
      <div class="templatemo-gallery-category" style="font-size:16px; margin-top:80px;">
        <div class="text-center">

        </div>
      </div>

  • <div class="Row"> <div class="col-Xs-12"><p></div> </div>

0

I believe the best way is to use the default class .row of Bootstrap outside your BOX and put in it a margin

CSS

<style>
    .row {
        margin-top: 15px;
        margin-bottom: 15px;
    }
</style>

HTML

<!-- box -->
<div class="row">
    <div class="col-xs-12">
        <div></div>
        <div class="col-lg-3">
            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
        </div>
        <div>
            <span>SERVIÇOS DE JARDINAGEM</span>
            <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas verdes e jardins de seu terreno.</p>
        </div>
        <div></div>
    </div>
</div>
<!-- box -->

Run "Whole Page" to see better

<!DOCTYPE html>
<html>
	<head>
		
	<meta charset="UTF-8">
	<title>Ensintech</title>
	<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" href="css/style.css">	
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style-mobile.css">


    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

    <style>

.row {
    margin-top: 15px;
    margin-bottom: 15px;
}
    </style>
	
	</head>
	
	<body>

        <div id="servicos" >
            <div class="container">
            <div class="row">
            <div class="templatemo-line-header" >
            <div class="text-center">
            <hr class="team_hr team_hr_left hr_gray"/><span class="txt_darkgrey">Nossos Serviçoss</span>
            <hr class="team_hr team_hr_right hr_gray" />
            </div>
            </div>
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE LIMPEZA</span>
                            <p>Temos uma das melhores metodologias do mercado e todo equipamento nescessário para executar o trabalho de limpeza e conservação com excelência, visando facilitar a vida do cliente e tornar o ambiente agradavél e limpo, proporcionando conforto e simplificando o dia dia dos nossos clientes.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
                    <div class="col-xs-12">espaço entre as imagens</div>
            
            <!-- box -->		
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE PORTARIA</span>
                            <p>Utilizando um dos melhores métodos de treinamento do mercado e atualizando a mão de obra a anualmente, dispomos dos melhores profissionais para atender os mais diversos tipos de portaria e proporcionar maior sensação de segurança e confiança para o ambiente contratado.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE RECEPÇÃO</span>
                            <p>Sabemos que uma calorosa e educada saudação de boas vindas no primeiro contato é primordial para um bom atendimento e comunicação com os clientes, com isso nós dispomos dos melhores e mais bem treinados profissionais para recepcionar todos de forma eficaz e educada.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE PORTARIA VIRTUAL</span>
                            <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas verdes e jardins de seu terreno.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE COPA</span>
                            <p>Dispomos de copeiras e garçons da mais alta competência para realizar as mais diversas atividades com discrição e eficiência, tanto para eventos ou rotinas diárias. Além de servir e manter o estoque em ordem eles também tem o compromisso de manter tudo higienizado.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE JARDINAGEM</span>
                            <p>Realizamos serviços desde o nível residencial, atendendo casas, condomínios e edifícios ate o comercial como empresas e industrias. Promovendo manutenção de forma eficaz preventiva, garantimos rejuvenescimento e revitalização de todas as áreas verdes e jardins de seu terreno.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <!-- box -->
            <div class="row">
                    <div class="col-xs-12">
                        <div></div>
                        <div class="col-lg-3">
                            <a><img src="http://placeskull.com/100/100" alt="Serviços de Limpeza" title="Cooparseg Cooperativa Paranaensa de Segurança"></a>
                        </div>
                        <div>
                            <span>SERVIÇOS DE CFTV</span>
                            <p>Circuito Fechado de Televisão (CFTV), é um sistema de TV que distribui sinais de câmeras colocadas em locais específicos, para um determinado ponto de supervisão. O CFTV não é aplicado somente com propósitos de segurança e vigilância, mas também em escolas, empresas e até na medicina.</p>
                        </div>
                        <div></div>
                    </div>
                </div>
            <!-- box -->
            
            <div class="clearfix"></div>
            <div class="templatemo-gallery-category" style="font-size:16px; margin-top:80px;">
            <div class="text-center">
            
            </div>
            </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


</body>
</html>

  • I solved with a gambiarra <p>

  • <div class="Row"> <div class="col-Xs-12"><p></div> </div>

  • @I don’t think Vanderleifeyth’s the best way to handle this, but if he did... Imagine if in the future you want to increase a little more, go putting <p> everywhere? And worse, if you want less space, how will you put something with less height than a <p>?

  • give me an email that I send the site for you to give an analysis and help me do it the right way if possible thank you

  • 1

    @Vanderleifeyth there is no right way. The friend of the other answer also gave a solution, you even made your gambit and it worked. The right and you evaluate what works best for your project and how it will behave in the long run and if the client will ask you to change something you can not in the future... Study more about CSS, Bootstrap and Good Practice that you can quickly make your own decisions in the right way.

  • OK Thank you very much!!!

Show 1 more comment

Browser other questions tagged

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