Margins and Padding

This page looks at how you can set margins and padding with blocks – if it’s possible and if it’s not

Firstly – just an ordinary text box with some text in it and nothing else. What can I change?

Firstly – just an ordinary text box with some text in it and nothing else. What can I change? Basically, it’s just the alignment and colour of the text and background. Note: as soon as I put some colour in the background, it puts padding around the text.

Firstly – just an ordinary text box with some text in it and nothing else. What can I change? Basically, it’s just the alignment and colour of the text and background. Here I have made it centre-aligned as well.

So, what if I create a column and then put a text box within that?

This is text in a column block with just one column.

This is text in a column block with just one column. I can change the width of the column, but not it’s position on the screen. This one is set at 90%, so leaves a 10% gap on the left.

This is what happens with two columns

This is the text in the first column.

This is the text in the second column.

This is the text in the first column with a coloured background. It indents the text to provide padding around it.

This is the text in the second column. This one has no background and therefore has no padding.

This is the text in the first column with a coloured background. It indents the text to provide padding around it.

This is the text in the second column. Now with a background, it is padded and you will note there is a gap between the boxes.

Now to show what happens when you add the colour to the column rather than the block.

This is the text in the first column – no background on the block.

This is the text in the first column – no background on the block.

This is the text in the first column – adding colour on the column rather than the block.

This is the text in the second column. You will see that the text in both blocks ends up unpadded, going right to the edge of the block.

And if you have two coloured sets of columns on top of each other

Firstly, the padded blocks:

There is a margin around each box

This is the text in the first column with a coloured background. It indents the text to provide padding around it.

This is the text in the second column. Now with a background, it is padded and you will note there is a gap between the boxes.

This is the text in the first column with a coloured background. It indents the text to provide padding around it.

This is the text in the second column. Now with a background, it is padded and you will note there is a gap between the boxes.

Then the columns:

The columns meld together

This is the text in the first column – adding colour on the column rather than the block.

This is the text in the second column. You will see that the text in both blocks ends up unpadded, going right to the edge of the block.

This is the text in the first column – adding colour on the column rather than the block.

This is the text in the second column. You will see that the text in both blocks ends up unpadded, going right to the edge of the block.

Moral – colouring column might be what you want to do – to have an area of text/images within a background, but it’s not very conducive to smart formatting! It’s best to know the limits and design your site accordingly!