CSS padding on a Text Block

Hey Tim, Peter. Tim, however slight, the method you suggest will change the size of the text field by the border size due to content-box sizing. In the example picture attached, I made all three text blocks the same size (300 x 117.) I also gave them a 4px border to help make small changes visible. I then adjusted the style in three different ways. First by just adding padding to the left and right of the text block div, second by your suggestion of adding margin to the left and right of the child paragraph and third by changing the box sizing and adding padding to the left and right. The results can be noticed because of the border. If you notice the dev console shows the original size of all three elements but when you mouse over each you see the actual size with the CSS applied. The middle example has a width of 308 because of the added 4 pixel border on both sides. The only one that stayed the original size is the last one, again because of the box-sizing being changed to border-box. Not a very big deal, especially if you do not have a border but it could make a difference. If you try it let me know if you get something different.

Darrel

undefined

Peter, I don't know if the !important declaration will work with a space between the exclamation point (or exclamation mark depending on where you live). It looks like you have a space in your example.

DRS

It should be possible to do it the other way round. Instead of adding padding to the undefined. That won't affect the size of the textfield. Both textfields in the screenshot are of the same size in Lectora.

Tim

I'm not sure what you are after? You add padding to the left and right exactly as you did in your examples. By default (the box model) box-sizing set to content-box, which as you explained, will increase the size of the div (text block). If you set box-sizing to border-box then the div's width will remain the same. Margins are not affected (or is it 'effected', I'll never understand it) by box-sizing as they are outside of the box. Is that what you're looking for?

G'day Tim,

Thanks again.

Regards, Peter

G'day Tim,

That did the trick, thank you very much.

Thank you very much to all that assisted. BTW there's no border on these.

Another CSS question:

I have multiple classes like: .ans1 p {...}, .ans2 p{...}, .ans3 p{...}, ...

Is there a way to do .ans## p{...}?

TIA

Regards, Peter

Good morning Peter,

you can select all undefined

}

Tim