how to give horizontal spaces between inputs with css?

Question

how to give horizontal spaces between inputs with css?

Navigation

#1 by (1 votes)

0

I was using   to separate my components and it worked for me, but apart from that it occupied many, which I did not like as much as it looked, in my xhtml they added the following

<!DOCTYPE html>
<ui:composition template="/templates/layout.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="content">
        </ui:define>
</ui:composition>

and it no longer takes them, the following error

javax.faces.view.facelets.FaceletException: Error Parsing  Error Traced[line: 320] Se hizo referencia a la entidad "nbsp", pero no se declaró.

then I have everything stacked, how can I give those spaces with css? I'm using primefaces

css primefaces jsf

asked by Root93 07.02.2018 в 00:33

source

1 answer

mvc recover data from view and refresh Submit in php to redirect to different pages?

score 1 · Answer 1

The spaces can be given, using margins (spacing between elements) or paddings (spaced between the container and its contents):

You can use it by putting a class to those elements like this:

.clase-elegida{
  margin-left: 10px;
  margin-right: 10px;
  /*O usando los padding*/
  padding-left: 10px;
  padding-right: 10px;
}

You can also use the shortener, taking into account the direction of the relog needles (up, right, down, left), the next example is the same as above:

.clase-elegida2{
  margin: 0 10px 0 10px;
  padding: 0 10px 0 10px;
}

And in fact you can shorten them more, because if you use only two, that is, so (0 10px) : means (up, down right, left). Example:

<!--En el HTML-->
<nav class="elemento"></nav>

/*En el CSS*/
.elemento { margin: 0 10px; }

You can also generate dynamic classes that you add to the elements whenever you need them like this:

.ml_10px { margin-left: 10px}
.mr_15px { margin-right: 15px}

And in html:

<div class="ml-10px"></div>
<div class="mr-15px"></div>

The disadvantage is that you have to create independent classes for each side or measure, it is very useful for dynamic classes, that you are dynamically placing when you paint several elements at the same time, it is the "bootstrap" model but it is somewhat cumbersome when you manually paint each element independently.

The other thing is that you add it to each html element, using online styles:

<section style="margin-left: 10px">

But it is not an option that recommends you only in exceptional cases or no more alternative, since the code in this way is much harder to maintain and you have to be repeating the code in each element unnecessarily.