#### CSS Layout Basics

##### June 28, 2018
css layout position centering

## CSS display properties: block, inline, and inline-block

As we know, HTML elements are usually either “block-level” elements or “inline” elements. A block-level element occupies the entire space of its parent element (container), thereby creating a “block”; inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. However, we can notice these three CSS display properties: block, inline, and inline-block. What are the differences and how to use them?

• display: block;

When specified this property, the element generates a block element box in order to manipulate the width and height conveniently.

You can add margin and padding on all four sides of any block-level element — top, right, left, and bottom. And even if you assign a width property, the element still fills up the horizontal space (of its container) on the web page.

• display: inline;

The element generates one or more inline element boxes. Every HTML element has a default display value depending on what type of element it is (but pay attention, not all inline elements have a default display: inline; value.) Some commonly used inline elements are <a>, <em>, <span>, <strong>, etc.

When it comes to margins and padding, browsers treat inline elements differently. You can add space to the left and right on an inline element, but you cannot add height to the top/bottom padding or margin of an inline element.

So what’s important to understand is that the top and bottom paddings on inline elements do not affect the way the browser displays that element and it’s neighbors in the way that it does on block elements. Check out this demo below:

Notice how the 1st and 2nd spans both have paddings of 20px and margins of 15px, but the paddings and margins overlap because the browser isn’t adding that those separation (padding-top/bottom and margin-top/bottom) between the inline elements. Uncomment the line with background: rgba(0,200,0,.5); in the css to see the padding on the 2nd <span> element. The 3rd <span> element has its display set to inline-block, so the browser actually shows the visual separation of 10px.

• display: inline-block;

The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would). Inline-block elements are similar to inline elements, except they can have padding and margin added on all four sides and you can assign width and height to them.

Tips: when there are multiple inline-block elements with differing height on the same line, remember to add vertical-align: top; in order to align to the top of the container (because the vertical-align is set at baseline as default.)

## Two-column (left-right) layout

1. Using float:

Remember we may need to clear the floats (by adding the class “clearfix”) on the parent element to keep the normal flow.

2. Using flex:

Just apply display: flex; to the parent element, and it also remains normal flow.

3. CSS tricks: Left Half and Right Half Layout – Many Different Ways

(To be continued, will update on more techniques with further learning :)

## Three-column (left-middle-right) layout

1. When it comes to columns with fixed width, just add another element for the middle part and use the float and flex techniques shown above.

2. Another example using float: fixed width for left and right divs, flexible width for the middle div. Set margin-left for the middle div greater than/equal to the left one’s width, and similarly set margin-right greater than/equal to right one’s width; the middle div doesn’t have a float property.

## Centering

• Center horizontally

• For inline or inline-* elements (like text or links):

Wrap the inline elements within a block-level parent element and apply text-align: center; CSS property to the parent.

• For block-level elements:

Given a width of a block element, set margin: 0 auto; to make it centered. This property won’t work on a float element.

• Center vertically

• For inline or inline-* elements (like text or links):

• Make padding-top equal to padding-bottom

• Make line-height equal to the height

• For block-level elements:

• With fixed height, use absolute position for this element and set top: 50%;, then adjust margin-top according to its box-sizing, height and padding to make it centered.

• With unknown height, still use absolute position for this element and set top: 50%;, then transform: translateY(-50%);.

Note that for this example when you replace div with p it might not seem centered vertically since the major web browsers will render a <p> tag with margin above and below the paragraph. A <div> tag will be rendered without any margin at all. So be sure to clear those up before making it centered.

• For elements with position: fixed

Now you can easily use a CSS3 transform without hardcoding a margin. This works on all elements, including elements with no width or dynamic width.

• Horizontal center:

left: 50%;
transform: translateX(-50%);

• Vertical center:

top: 50%;
transform: translateY(-50%);

• Both horizontal and vertical:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);