Padding e Margin

Front-end

06/07/2015

As propriedades padding e margin, muito interessantes por sinal, eu posso utiliza-las para desenhar a estrutura do meu site? Aprendi um exemplo que me deu alguma "luz" nesse proprosito.

html


<html>
	<head>
		<title>Titulo da pagina</title>
		
		<link href="estilo01.css" rel="stylesheet" type="text/css"		
	</head>
	<body>
		<div class="aula11_auxiliar aula10_border01 aula11_margin01 aula11_padding01">Div 01</div>
		<div class="aula11_auxiliar aula10_border01 aula11_margin01 aula11_padding01">Div 02</div>
		<div class="aula11_auxiliar aula10_border01 aula11_margin01 aula11_padding02">Div 03</div>
		<div class="aula11_auxiliar aula10_border01 aula11_margin01 aula11_padding01">Div 04</div>
		<div class="aula11_auxiliar aula10_border01 aula11_margin01 aula11_padding01">Div 05</div>		
	</body>
</html>


css


.aula11_auxiliar{
	float:left;
	display:block;
	width:120;
	height:120px;
}

.aula11_margin01{
	margin:10px;
}

.aula11_margin02{
	margin-left:30px;
	margin-right:30px;
	margin-top:30px;
	margin-bottom:30px;
}

.aula11_padding01{
	padding:10px;
}

.aula11_padding02{
	padding-left:30px;
	padding-right:30px;
	padding-top:30px;
	padding-bottom:30px;
}


*pesquisa:

[url]https://www.devmedia.com.br/como-usar-as-propriedades-margin-e-padding-css/24409[/url]
[url]http://pt-br.html.net/tutorials/css/lesson10.php[/url]
Gabriela Monte

Gabriela Monte

Curtidas 0

Respostas

Marcelo Pastore

Marcelo Pastore

06/07/2015

Esses conceitos podem ser utilizados sim!

[url]http://www.linhadecodigo.com.br/artigo/3570/como-criar-um-layout-de-duas-colunas-com-html-e-css.aspx[/url]

[url]http://pt-br.learnlayout.com/index.html[/url]
GOSTEI 0
Gabriela Monte

Gabriela Monte

06/07/2015

Hum, pelo visto é mesmo possivel fazer layouts! Você visualizou o código?
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/07/2015

Hum, pelo visto é mesmo possivel fazer layouts! Você visualizou o código?


Sim, vi sim o código! é um inicio.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/07/2015

Hum, pelo visto é mesmo possivel fazer layouts! Você visualizou o código?


Sim, vi sim o código! é um inicio.
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/07/2015

Hum, pelo visto é mesmo possivel fazer layouts! Você visualizou o código?


Sim, vi sim o código! é um inicio.
GOSTEI 0
Jothaz

Jothaz

06/07/2015

Hum, pelo visto é mesmo possivel fazer layouts! Você visualizou o código?


Na verdade "Margin" e "Padding" são específicos para construção de Layouts e apresentação.
Com eles você controla como cada tag vai se comportar, principalmente quando estão aninhadas.

Coloquei seu códgio no fiddle, fica mais fácil a visualização e se quiser testar facilita também.

Coloquei uma borda para facilitar identificar as Div´s.

[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20150707-233121.png[/img]
GOSTEI 0
Gabriela Monte

Gabriela Monte

06/07/2015

Sem borda não tem como Jothaz, a não ser que dê para mudar a cor de fundo de cada div.
GOSTEI 0
Jothaz

Jothaz

06/07/2015

Sem borda não tem como Jothaz, a não ser que dê para mudar a cor de fundo de cada div.


Sempre uso a borda para facilitar a visualização no desenvolvimento e depois retiro.

Agora mudar a cor de funo da Div é simples:

.aula11_auxiliar{
    float:left;
    display:block;
    width:120;
    height:120px;
    background: blue;
}


[img]http://arquivo.devmedia.com.br/forum/imagem/418027-20150708-150906.png[/img]


Usando jQuery da até para pegar os valores dos atributos da Div no clique sobre ela, como pode ser visto aqui no fiddle.js
GOSTEI 0
Gabriela Monte

Gabriela Monte

06/07/2015

Melhor opção, mudar as cores das divs.

Jothaz, por mim, esclarecido 100%

Obrigada!!!

Marcelo tb!!!
GOSTEI 0
Marcelo Pastore

Marcelo Pastore

06/07/2015

Disponha Gabriela!
GOSTEI 0
POSTAR