{"id":672,"date":"2020-07-03T19:54:15","date_gmt":"2020-07-03T22:54:15","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=672"},"modified":"2022-12-09T08:32:36","modified_gmt":"2022-12-09T11:32:36","slug":"layout-css-display-inline-block","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/layout-css-display-inline-block\/","title":{"rendered":"Layout CSS – display: inline-block"},"content":{"rendered":"

Confira aqui sobre – Layout CSS – exibi\u00e7\u00e3o: bloco em linha – Layout CSS – display: inline-block<\/p>\n

A tela: Valor do bloco embutido<\/strong><\/p>\n

Comparado com display: inline<\/code>, a principal diferen\u00e7a \u00e9 que display: inline-block<\/code> permite definir uma largura e altura no elemento.<\/p>\n

Al\u00e9m disso, com display: inline-block<\/code>, as margens \/ forros superiores e inferiores s\u00e3o respeitados, mas com display: inline<\/code>eles n\u00e3o s\u00e3o.<\/p>\n

Comparado a display: block,<\/code> a principal diferen\u00e7a \u00e9 que display: inline-block<\/code>n\u00e3o adiciona uma quebra de linha ap\u00f3s o elemento, para que o elemento possa se sentar ao lado de outros elementos.<\/p>\n

O exemplo seguinte mostra o comportamento diferente de display: inline<\/code>, display: inline-block<\/code> e display: block<\/code>:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nspan.a {\r\n  display: inline; \/* the default for span *\/\r\n  width: 100px;\r\n  height: 100px;\r\n  padding: 5px;\r\n  border: 1px solid blue;  \r\n  background-color: yellow; \r\n}\r\n\r\nspan.b {\r\n  display: inline-block;\r\n  width: 100px;\r\n  height: 100px;\r\n  padding: 5px;\r\n  border: 1px solid blue;    \r\n  background-color: yellow; \r\n}\r\n\r\nspan.c {\r\n  display: block;\r\n  width: 100px;\r\n  height: 100px;\r\n  padding: 5px;\r\n  border: 1px solid blue;    \r\n  background-color: yellow; \r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>The display Property<\/h1>\r\n\r\n<h2>display: inline<\/h2>\r\n<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class=\"a\">Aliquam<\/span> <span class=\"a\">venenatis<\/span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. <\/div>\r\n\r\n<h2>display: inline-block<\/h2>\r\n<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class=\"b\">Aliquam<\/span> <span class=\"b\">venenatis<\/span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. <\/div>\r\n\r\n<h2>display: block<\/h2>\r\n<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat scelerisque elit sit amet consequat. Aliquam erat volutpat. <span class=\"c\">Aliquam<\/span> <span class=\"c\">venenatis<\/span> gravida nisl sit amet facilisis. Nullam cursus fermentum velit sed laoreet. <\/div>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Usando o bloco embutido para criar links de navega\u00e7\u00e3o<\/strong><\/p>\n
Um uso comum display: inline-block<\/code> \u00e9 exibir itens da lista horizontalmente em vez de verticalmente. O exemplo a seguir cria links de navega\u00e7\u00e3o horizontal:<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.nav {\r\n  background-color: yellow; \r\n  list-style-type: none;\r\n  text-align: center;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.nav li {\r\n  display: inline-block;\r\n  font-size: 20px;\r\n  padding: 20px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Horizontal Navigation Links<\/h1>\r\n<p>By default, list items are displayed vertically. In this example we use display: inline-block to display them horizontally (side by side).<\/p>\r\n<p>Note: If you resize the browser window, the links will automatically break when it becomes too crowded.<\/p>\r\n\r\n<ul class=\"nav\">\r\n  <li><a href=\"#home\">Home<\/a><\/li>\r\n  <li><a href=\"#about\">About Us<\/a><\/li>\r\n  <li><a href=\"#clients\">Our Clients<\/a><\/li>  \r\n  <li><a href=\"#contact\">Contact Us<\/a><\/li>\r\n<\/ul>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n