CSS – block, inline-block and inline

differences between block and inline elements, <span>CSS – block, inline-block and inline</span>, KandZ

Table with block and inline elements

Block elementsInline elements
pa, br, img
h1, h2, h3, h4, h5, h6span, sub, sup
div, tablei, b, small, big
blockquoteq
ul, ol, limap, object, script
pre, form button, input
hrlabel, select, textarea

Table with differences between block, inline-block and inline

blockinline-blockinline
ignores the vertical align propertyvertical-align and white-space can be used
takes its children’s heigh or height if is set. You can set width and heightrespects width and height properties and vertical padding contributes to the heightignores width and height properties.
appears below and to the left of its block neighbourappears to the right of its previous inline neighbour and remains at the position they are being placed
will expand to fill the width of the parent containercontent of elements plus padding is the width
margin properties are being respectedrespects top and bottom marginsignore top and bottom margins
horizontal centering with margin:auto if you have set the widthhorizontal centering with text-align: center
vertical centering with vertical-align:middle

Use the display property to specify the display behavior of an element.

THE END!!!

93980cookie-checkCSS – block, inline-block and inlineCSS – block, inline-block and inline

Related posts

2 Thoughts to “CSS – block, inline-block and inline

  1. […] CSS – block, inline-block and inline […]

Comments are closed.