CSS padding on a Text Block
May 15, 2016 12:00 AM
G'day All,
Anyone know how to apply padding left and right (only) to a Text Block?
I have a Text Block and have assigned a class "MyPaddedText" and I have CSS:
.MyPaddedText {padding-left: 5px; padding-right: 5px;}
This works as expected however, it also increases the width of the Text Block by 10px. If you try this make the padding to say 20. e.g.:
.MyPaddedText {padding-left: 20px; padding-right: 20px;}
You should see the Text Block grow by 40px and you should have 40px padding - 20px left and 20px right.
If I add the width to the style then it works OK, however, not all Text Blocks are the same width. e.g.:
.MyPaddedText {padding-left: 5px; padding-right: 5px; width: 490px ! important;}
The Text Block would be 500px wide using the above.
I understand that I could set the "Margin Size" from within the "Text Style" but that wraps the text in a table with padding which also pads the Top and Bottom.
TIA
Regards, Peter
undefined
Discussion (7)
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
![pic1.png](https://community.elblearning.com/hubfs/CohortiumThreadImages/a02a8cc8c2a6e61128a751eceb60e580.png)
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
![paddingontextfield.png](https://community.elblearning.com/hubfs/CohortiumThreadImages/dbe8550fb7c97fbb0cf29dd191cd8d76.png)
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,
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
Discussions have been disabled for this post