Display: inline, em DIV

Front-end HTML
#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!

Screenshot at 2017-01-19 15:04:27.png1600×900 46.5 KB

1 curtida
#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.

1 curtida
#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?

1 curtida
#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:

1 curtida
#8

Valeu, valeu, [RESOLVIDO]!!