Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

ahenriqueps

Div não respeita margin

Por , em Desenvolvimento frontend

Recommended Posts

ahenriqueps    0

ahenriqueps
Postado

Bom dia galera. Sou iniciando com CSS e estou começando a desenvolver aplicativos Web na empresa onde trabalho. Estou com um pequeno problema que acredito que a solução seja simples. Tenho uma section e dentro desta section tenho uma div. A altura da section é de 40% e a altura da div é de 96% (ou seja, ela ocupa 96% da área da section, correto?). Porém, quando eu coloco margin de 2% na div, ela não respeita este valor na questão bottom. Ela está ocupado toda a section com exceção do top, right e left. Gostaria de saber onde está o meu erro. Segue os códigos abaixo.

 

HTML

<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="CSS/styleSelObjetos.css" type="text/css" media="screen">
<title>..:: DÍVIDA ATIVA WEB ::..</title>
</head>
<body>
<div id="divMain">
<section id="secBoasVindas">
<div id="divImagem">
<!--<img src="IMAGENS/bemVindo.png" id="imgBemVindo" />-->
</div>
</section>
</div>
</body>
</html>

 

CSS

#divMain {
float: left;
display: inline;
width: 100%;
height: 100%;
/*background: url("../IMAGENS/logoTecGlobal.png") top left;*/
background-color: #90EE90;
z-index: 00;
}

#secBoasVindas {
float: left;
display: inline;
width: 30%;
height: 26%;
background-color: blue;
z-index: 01;
}

#divImagem {
float: left;
display: inline;
width: 28%;
height: 96%;
margin: 02%;
background-color: #FFFF00;
z-index: 02;
}

 

Desde já, agradeço a atenção de vocês.

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Acredito que o problema esteja no "box-sizing".

Por padrão o "box-sizing" dos elementos não incluem margens, paddings e bordas.. ou seja.. se você tem uma div e declara uma largura de 200px, mas ela tem um padding de 20px, no total ela terá uma largura de 240px (20 do padding da direita, 200 da largura e mais 20 do padding da esquerda).

 

Quando se declara "box-sizing: border-box;", ele inclui os valores de margin/padding/border no valor da largura. Ou seja, se você declarar uma largura de 200px e um padding de 20px, ele continuara com 200 de largura, porém, o padding irá consumir 20 de cada lado, ficando apenas 160px da largura disponível.

 

Acho que é mais ou menos isso seu problema.

 

Tenta adicionar isso ao seu CSS:

 

* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

ou então declara os box-sizing na div desejada.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

É por causa da margin do filho, que faz ele sair da altura do pai.

O que você pode fazer é diminuir o valor da margin, ou então colocar um "overflow:hidden;" no pai, para limitar os elementos filhos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ahenriqueps    0

ahenriqueps
Postado

Opa, coloquei o overflow conforme me disse e não funcionou. Sobre diminuir o valor do margin, eu não posso fazer isso. Se você olhar o código fonte, verá que o height do div filho está com 96% de altura do pai e 2% de margin, então, deveria estar sobrando 2% de "espaço" no bottom o que não está ocorrendo. Ou eu estou errado nas minhas contas matemáticas?

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

É que valor height em % não funciona na div pai..

Tenta atribuir "vh" na altura da div pai.. e a margin tbm não funciona, pois ela vai pegar o espaço em volta.

Troca a margin da div filho por um padding da div pai.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ahenriqueps    0

ahenriqueps
Postado

RikasSchmitt, quero agradecer sua ajuda. Utilizei o padding e funcionou. Depois vou estudar mais a fundo essas propriedades e com calma. Hehe. O link já está atualizado. Agora, olhar o que houve com o PHP. Abraços e sucesso meu bom.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito