GUJ Discussões   :   últimos tópicos   |   categorias   |   GUJ Respostas

Display: inline, em DIV

html5
Tags: #<Tag:0x00007fda08ba9070>

#1

Eu tenho um HTML com duas DIV. Só que quando eu coloco Display: inline nas duas DIVs, elas não ficam inline, ou seja uma após a outra. Qual o meu erro?

Código HTML

<!DOCTYPE html>
<html>
	<head>
		<title>Teste</title>
		<link rel="stylesheet" href="teste.css">
	</head>
	<body>
		<div id="div01"></div>
		<div id="div02"></div>
	</body>
</html>

Código CSS

* {
	padding: 0;
	margin: 0;
}

#div01 {
	box-sizing: content-box;
	width: 50px;
	height: 50px;

	background-color: red;
	border: 10px solid #0f0;
	margin: 25px;
	display: inline;
}

#div02 {
	box-sizing: content-box;
	width: 50px;
	height: 50px;

	background-color: blue;
	border: 10px solid #0f0;
	margin: 25px;
	display: inline;
}

Como ficou!


#2

Do jeito que vc fez elas ficam sim uma após a outra, no caso, uma ao lado da outra. O único possivel problema que vejo é que elas estão separadas por aquele espaço em branco.

Vc quer que elas fiquem lado a lado grudadas uma na outra? Tenta excluir aquelas duas linhas margin: 25px.


#3

Não, eu quero que eles fiquem com um espaço e com bordas


#4

Eles também não ficam do mesmo tamanho


#5

E se vc tentar display: inline-block?


#6

Beleza, funcionou, mas qual a diferença entre, block, inline e inline-block?


#7

Não sei responder tecnicamente, mas elementos inline não deixam vc definir width, nem height e nem margens acima ou abaixo.

Já elementos block não permitem outros elementos block ficarem lado a lado.

Os inline-block reúnem o melhor dos dois mundos.

Achei este artigo que pode ajudar:


#8

Valeu, valeu, [RESOLVIDO]!!