{"id":412,"date":"2020-06-30T16:12:35","date_gmt":"2020-06-30T19:12:35","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=412"},"modified":"2020-07-01T21:31:38","modified_gmt":"2020-07-02T00:31:38","slug":"bloco-html-e-elementos-embutidos","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/bloco-html-e-elementos-embutidos\/","title":{"rendered":"Bloco HTML e elementos embutidos"},"content":{"rendered":"

Todo elemento HTML possui um valor de exibi\u00e7\u00e3o padr\u00e3o, dependendo do tipo de elemento que \u00e9.<\/p>\n

Existem dois valores de exibi\u00e7\u00e3o: bloco e embutido.<\/p>\n

 <\/p>\n

Elementos em n\u00edvel de bloco<\/strong>
\nUm elemento no n\u00edvel do bloco sempre inicia em uma nova linha e ocupa toda a largura dispon\u00edvel (se estende para a esquerda e direita, tanto quanto poss\u00edvel).<\/p>\n

O elemento <div> \u00e9 um elemento no n\u00edvel do bloco.<\/p>\n

Exemplo<\/p>\n

<<\/span>div><\/span><\/span>Hello World<<\/span>\/div><\/span><\/span><\/code><\/p>\n

Elementos em linha<\/strong>
\nUm elemento embutido n\u00e3o inicia em uma nova linha e ocupa apenas a largura necess\u00e1ria.<\/p>\n

Este \u00e9 um elemento <span><\/code> dentro de um par\u00e1grafo.<\/p>\n

Exemplo
\n<span>Hello World<\/span><\/code><\/p>\n

 <\/p>\n

Exemplo geral<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<body>\r\n\r\n<div style=\"background-color:black;color:white;padding:20px;\">\r\n  <h2>London<\/h2>\r\n  <p>xxxx x x x x x x xx x <\/p>\r\n  <p>xxxoxxxx xx xoxxx x<\/p>\r\n<\/div> \r\n\r\n<h1>xxx x x x xx<\/h1>\r\n\r\n<p>eu tenho olhos <span style=\"color:blue;font-weight:bold\">azuis<\/span> e ela <span style=\"color:darkolivegreen;font-weight:bold\">verdes<\/span> olhos.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n