Sempre que uso no meu css a configuração :
.produtos li {
width: 30%;
margin: 0 1.5%;
}O tamanho da box excede e o meu ultimo produto vai para segunda linha. Por algum motivo, mesmo usando o css-reset, existe um margin , que eu não consegui identificar, nos blocos dos produtos e por esse motivo sou obrigado a usar a configuração abaixo:
.produtos li {
width: 30%;
margin: 0 1.45%;
}Alguém sabe como resolver? E por que isso acontece?
Obrigado! []'s
Olá Gustavo Leal Silva E Souza! Tudo bem? Olha eu não sei dizer ao certo sobre o porque disso estar acontecendo. Mais arrisco em dizer 2 coisas que pode ser que resolva. Uma delas é: pode ser que haja algum código digitado errado ou faltando algum ponto e vírgula por exemplo. E a outra: Seria, poder ser que seu arquivo reset.css esteja compactado na sua pasta ou não esteja na pasta correta. Se ele ainda tiver compactado em formato zip. Que veio do jeito que você baixou. A pasta tem o desenho de zip. Então você precisa descompactar o arquivo que por padrão vem compactado. Pra isso você clica com o botão direito do mouse sobre o arquivo e vai na opção extrair aqui e pronto. Com certeza vai funcionar. Se ainda ficou com alguma dúvida. Ai você vê um vídeo tutorial que deixei no YouTube ensinando como descompactar uma imagem. Que é o mesmo procedimento com esse arquivo que te falei. Então sobre o vídeo:
Olá, Marcos! Muito obrigado pela ajuda, mas não funcionou. Baixei o projeto disponibilizado no curso e o mesmo problema aconteceu. Tive que alterar a margin de 1.5% para 1.4% para obter o mesmo resultado do treinamento.
Utilizei o css-reset.css abaixo:
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, b, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
E também o script abaixo:
* {
padding:0;
margin:0;
vertical-align:baseline;
list-style:none;
border:0
}Nenhum dos dois resolveu o problema da margin 1.5%
Estranho né? Mais tá bom.
mesmo usando o: box-sizing: border-box; ?