Tem espaço nos elementos (sem usar margin)

chlins · Junho 17, 2012

Pessoal,

O que há de errado neste código, pois tem espaços em alguns elementos com espaços que não tem nem margin nem padding.

Exemplo:


<body>
<div id="main">
	<span class="imagem-top"> </span>
	<header>
		<div id="head">
		<section class="social">
			<ul>
				<li><a class="fb over" href="https://www.facebook.com/pages/" title="Siga-nos no Facebook" id="face" target="_blank">Facebook</a></li>
				<li><a class="tw over" href="#" title="Siga-nos no Twitter" id="twitter" target="_blank">Twitter</a></li>
				<li><a class="in over" href="#" title="Pagina no Linkedin" id="linkedin" target="_blank">Linkedin</a></li>
				<li><a class="gp over" href="#" title="Recomende com o Google Plus" onClick="javascript:abrirGoogle();" id="gplus">Google Plus</a></li>
			</ul>
		</section><!-- /social -->

		<!-- GOOGLE PLUS -->
		<div id="google" class="google">
             <!-- <span>Nos recomende no Google +1!</span> -->
             <g:plusone></g:plusone>
           </div><!-- /google -->


		<div class="idioma">
			<a href="#" title="Português">pt</a>
			<a href="#" title="English">en</a>
		</div><!-- /idioma -->

			<div id="contatos">
				<a href="faleconosco.html" class="contato" id="contato">fale conosco</a>
				<a href="orcamento.html" class="orcamento">orçamento</a>
			</div><!-- /contatos -->

				<h1><a href="index.html"><img src="images/logo.png" alt="sdsdsd" title="sdsdsds"></a> </h1><!-- /logo -->

			<nav role="navigation">
				<ul>	
					<li class ="nav-empresa"><a title="Empresa" href="empresa.html">Empresa</a></li>
					<li class ="nav-servicos"><a title="Serviços" href="servicos.html">Serviços</a></li>
					<li class ="nav-clientes"><a title="Clientes" href="clientes.html">Clientes</a></li>
					<li class ="nav-trab"><a title="Trabalhe conosco" href="trabalheconosco.html">Trabalhe conosco</a></li>
				</ul>
			</nav><!-- /nav -->
		</div><!-- /head -->
		</header>
		<!-- fim header -->

		<!-- MAIN CONTENT -->
	<div id="main-content">
		<section id="col-one">
			<span class=""> </span>
		</section><!-- /col-one -->
		<section id="empresa">
			<h2>Historia da dsdsds</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			<h2>Por quê a dsdsdpara traduzir seu trabalho?</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
				tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
				quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
				cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
				proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		</section><!-- /empresa -->
		<div class="clear"></div>
	</div><!-- /content-main -->

	<footer>
		<p>©Copyright 2012 - LTDA - <a href="#" title="">Design by </a></p>
	</footer>
</div><!-- /main -->
</body>


a:link, a:active, a:visited {color: #305F9B;text-decoration: none;}
.clear{clear:both;}

a{ -moz-transition: color  0.5s; -webkit-transition: color 0.5s; -o-transition: color  0.5s; -ms-transition: color 0.5s; transition: color 0.5s;}

p { margin-bottom: 10px; } 
h1, h2, h3, h4, h5, h6 { margin-bottom: 5px; } 

html, body {height:100%;}

body{
font-family: 'Ropa Sans', "Trebuchet MS", sans-serif;
font-size: 14px;
font-weight: normal;
position: relative;
color: #333;
width: 100%;
height: 100%;
color:#666;
margin: 20px 0px;
background:
url(images/mapa_mundi.png) fixed,
url(images/bg.jpg);
background-position: center;
}
.social a {width:36px; height:33px; background:url(images/sprite.png) no-repeat; display: block}

/*GOOGLE PLUS*/
#google{display:none; font-size:15px; position: absolute; left:175px; top: 5px; z-index: 999; }

#main{
width: 980px;
height: auto;
min-height:100%;
background-color: #FFF;
margin: 0 auto;
text-align:left;
box-shadow:0 0 10px rgba(0,0,0,0.5);
position: relative;
overflow: hidden;
}

.imagem-top {
width: 100%;
height: 257px;
position: absolute;
top:0;
right:0;
background:
url(images/bg-header.png), url(images/bg-curva-alto.png);
background-position: top left;
background-repeat: no-repeat;
}

/*HEADER*/
#head{width: 100%; height: 256px; padding: 0; margin: 0; position: relative; }

.social{width:145px; height:35px; margin: 20px 0 0 20px; }
.social li{float: left; display:block; background:none !important;}
.over{text-indent:-9000px; overflow:hidden;}
.social a.fb {background-position:-10px  -12px }
.social a.fb:hover{background-position:-10px  -44px}
.social a.tw {background-position:-50px  -12px }
.social a.tw:hover{background-position:-50px  -44px}
.social a.in {background-position:-88px  -12px }
.social a.in:hover{background-position:-88px  -44px}
.social a.gp {background-position:-127px -12px }
.social a.gp:hover{background-position:-127px -44px}
.social li a:link, .social li a:active,	.social li a:visited{
-webkit-transition: background 0.5s ease-out;
-moz-transition: background 0.5s ease-out;
-o-transition: background 0.5s ease-out;
-ms-transition: background 0.5s ease-out;
transition: background 0.5s ease-out;
}

#contatos{width:145px; height:45px; margin: 20px 0 0 20px; float: left; }
#contatos a{font-size:18px; letter-spacing: 1px; text-transform: uppercase; line-height: 25px; color: #FFF; display: block; }
#contatos a:hover{color: #333;}

.g-plusone{float: left; }

.idioma{float: right; position: absolute; top: 0; right: 10px}
.idioma a{text-decoration: none; font-size: 17px; padding: 2px 4px; width: 10px; height: 10px; background-color: #DDD;
		text-align:center; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.idioma a:hover{text-decoration: underline; color: #666; background-color: #FFF;}

header h1{margin-top:0; right:150px; position: absolute; }

nav{
width: auto;
height:40px;
margin:170px 70px 0 0;
font-size: 18px;
font-weight:500;
text-transform: uppercase;
float: right;
border-bottom: 1px dotted #ddd;
}

nav li{margin: 0; display: inline;}
nav li a{margin: 0 5px; letter-spacing: 1px;}
nav li a:link { color: #448; text-decoration: underline}
nav li a:visited { color: #BBB; }
nav li a:hover{color: #369;}


/*MAIN CONTENT*/
#main-content{
overflow:hidden;
width:100%;
height: 100%;
padding: 0;
margin: 0;
background-image: url(images/tracos.png);
background-color: #DDD;
}

section#col-one{width: 300px; height: auto; min-height: 200px; float: left; margin: 20px 0 0 20px; background-color: #f4f4f4;}

/*FOOTER*/
footer { 
background: #369 url(images/logo-footer.png) no-repeat right 10px;
padding: 5px;
border-top: 2px solid #999;
position:absolute;
   bottom:0;
   width:100%;
}
footer p{ margin: 10px; font-size: 11px; color: #fff;}
footer a:link {text-decoration: none; color: #000099}


/*EMPRESA*/
section#empresa, section#servicos, section#clientes{width: 450px; float: right; margin: 0 45px 0 0;}
section#empresa h2{font-size: 25px; color: red; font-weight: 700;}
section#empresa p{font-size:16px; line-height: 20px; }

mangakah · Junho 17, 2012

A propriedade 'display' desses elementos é 'block' por padrão. Se você definir 'inline', esse espaçamento será removido.

Exempl0

section#empresa h2 {
 display: inline;
}

chlins · Junho 17, 2012

Realmente o problema é display:block que está no reset.

Dúvidas:

Porque então ter o display:block por default se não podemos manipular os elementos?
Se coloco display: inline no h2 e no p, os espaços somem, mas o paragrafo sobe junto ao titulo como se fosse necessário um float.
Há também um espaço entre main-content e o rodapé (o height está como 100%)

Qual a solução?

Há muitas inconsistências neste meu código?

mangakah · Junho 17, 2012

1. Não entendi direito... / Todos os elementos de alguns valores por padrão.

2. Você deve usar margin ou padding para corrigir isso.

3. Até onde sei height 100% é o mesmo que height auto, não funciona como em width.

William Bruno · Junho 17, 2012

3. Até onde sei height 100% é o mesmo que height auto, não funciona como em width.

Não amigo. Não é assim que funciona.

auto é uma coisa e 100% é outra, completamente diferente, tanto para width qnto para height.

@chlins, no teu caso, sempre comece teus trabalhos com um css reset básico:

* { margin: 0; padding: 0; }

Eu pelo menos não vi nenhum problema no uso do display.

Há muitas inconsistências neste meu código?

existem algumas coisas problemáticas sim.

1. Falta total de semântica:

<span class="imagem-top"> </span>

pq você não usou uma tag <img /> ?

2. Pra quê usar DIV? você pode colocar o ID na tag header.

<header id="head">

3. Na minha opinião:

<h1><a href="index.html"><img src="images/logo.png" alt="sdsdsd" title="sdsdsds"></a> </h1><!-- /logo -->

isso é um desperdício de tag h1. Não conheço a estratégia de SEO que você traçou, mas eu não costumo usar o logo como h1. Pois você já possui a força do domínio, da marca.. e geralmente para competir, você enfrenta os concorrentes com os seus produtos, e não com seu nome.(afinal, se buscarem teu nome, então já te conhecem)

E algumas outras coisas menores, que posso avaliar melhor se ver o layout final.

mangakah · Junho 17, 2012

Verdade William, obrigado pela correção. Mas às vezes 100% tem o mesmo efeito de auto. Como por exemplo nessa página (do fórum) o elemento DIV com id 'feed-top'... se colocar height 100% nele, ficará com os mesmos 50px de quando o valor de height é 'auto'. Mas se colocar um valor em pixels, ele fica com o valor alterado. Você sabe porque?

@chlins

Estou testando no Chrome 19 aqui e o elemento section#empresa está vazando para o footer, forçando o elemento pai div#main-content a ir junto também.

William Bruno · Junho 17, 2012

Ok, vamos lá:

height: 100% e width: 100% sempre vão se referir ao elemento pai.

Por exemplo, DIV tem por default width, e height: como auto.

veja:

<html>
<head>
<style type="text/css">
* { margin: 0; padding: 0; }
#pai { border: 1px solid #f00; width: 400px; height: 400px; }
#filho { background: #ff0; }
</style>
</head>
<body>  
<div id="pai">
       <div id="filho">
               conteudo filho
       </div><!-- /filho -->
</div><!-- /pai -->
</body>
</html>

com este código, você verá o seguinte:

http://www.uploadscreenshot.com/image/1105010/3144905

o height: auto, fará que a altura do filho ocupe somente o necessário para o conteúdo dele. Assim se eu aumentar a quantidade de texto, então a amarelo será exatamente isso. "O necessário".

Já se eu fizer isso aqui:

#filho { background: #ff0; height: 100%; }

Então teremos todo o quadrado pintado de amarelo, ou seja #filho ocupando 100% da altura do #pai, que vale 400px.

E aqui para deixar bem ilustrado, vou fazer o seguinte:

#filho { background: #ff0; height: 100%; width: auto; }

ok? não alterei nada, pois o default do width já era auto.

Se colocar um padding:

#filho { background: #ff0; height: 100%; width: auto; padding: 0 30px; }

a única coisa que você notará, é que o texto, começará 30px mais pro lado, e não grudado na borda vermelha.

Logo, este foi o papel do width: auto: Fazer 30px + auto + 30px equivaler a 400px.

Diferente se eu tivesse colocado width: 100%:

#filho { background: #ff0; height: 100%; width: 100%; padding: 0 30px; }

e assim eu teria:

30px + 100%(400px) + 30px = mais do que 400px, e o filho seria mais largo que o pai.

Gerando a seguinte imagem:

http://www.uploadscreenshot.com/image/1105029/1874669

Okay ? são coisas diferentes :lol:

mangakah · Junho 17, 2012

Bom, primeiramente MUTIO OBRIGADO por ter tido o trabalho de escrever tudo isso. :clap:

Mas eu já sei de tudo isso e... desculpe a minha burrice, mas eu ainda não entendi o porque, como no exemplo que eu dei acima, ou como em relação ao exemplo do elemento #main-content na página do @chlins, colocar div 100% dá o mesmo resultado de 'auto'. Sei que é alguma interferência dos outros elementos (especialmente o elemento pai), mas ainda não consegui entender como e porque.

William Bruno · Junho 17, 2012

Okay, sobre o #feed-top. Olhe o pai dele:

class="topic hfeed"

Não tem nenhum height definido, ou seja, height: auto.

Se você colocar height: 100% na feed-top, então esse 100%, vai ter o valor: auto. Por este motivo você não notou diferença.(não existe diferença, você não mudou nada).

Agora coloque um height: 500px; na .topic.hfeed pra você ver :lol:

mangakah · Junho 17, 2012

Okay, sobre o #feed-top. Olhe o pai dele:

class="topic hfeed"

Não tem nenhum height definido, ou seja, height: auto.

Se você colocar height: 100% na feed-top, então esse 100%, vai ter o valor: auto. Por este motivo você não notou diferença.(não existe diferença, você não mudou nada).

Agora coloque um height: 500px; na .topic.hfeed pra você ver :lol:

Como assim, herança de filho pra pai??? :wacko:

Eu coloquei inline "height: 500px;" no div pai de feed-top (class="topic hfeed") e isso não alterou feed-top em nada (Chrome 19).

<div class="topic hfeed" style="height: 500px;">

Será que atirar minha cabeça contra a parede me ajudaria a entender isso? :grin:

Ops... errei.... tá certo o negócio da herança. é de pai pra filho. Mas alterar o valor de height no elemento pai não alterou o elemento filho.

Mas ainda assim os 100% não deveriam sobrescrever o valor 'auto'?

William Bruno · Junho 17, 2012

Ops... errei.... tá certo o negócio da herança. é de pai pra filho. Mas alterar o valor de height no elemento pai não alterou o elemento filho.

e nem deveria. Só vai alterar, se o filho tiver o height: 100%;

Mas ainda assim os 100% não deveriam sobrescrever o valor 'auto'?

depende do que realmente o 100% representa.

Se o pai tem um height: auto, então 100% do filho, representa auto também.

Se o pai tem um valor em px, então 100% do filho, representa esse mesmo valor em px.

tão simples qnto isso.

mangakah · Junho 17, 2012

Agora finalmente um neurônio se encontrou com o outro em minha cabeça. Muito obrigado mais uma vez pela paciência. Estava fazendo uma confusão por nada... deve ser a falta de sono (tô até agora acordado).

chlins · Junho 24, 2012

Pessoal,

@William Bruno - Fiz algumas mudanças que me sugeriu.

O método que usei para inserir uma imagem (BG) sem relevância: <span class="imagem-top"> </span> foi uma dica em um blog americano.

No site (abaixo) deixei a div:main-content com um BG para mostrar os espaços que ficam em relação ao rodapé e não sei o porquê.

@mangakah - Cara, realmente tem hora que o css dá um nó em nossa cabeça.

Este é o projeto em questão: Clique aqui

Arquivado

Tem espaço nos elementos (sem usar margin)

Recommended Posts

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

mangakah 217

Compartilhar este post

Link para o post

Compartilhar em outros sites

chlins 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Consulta sem duplicação

Fóruns

Tempo Real

Informação importante