Explore the community Forums Lectora Lectora Questions & Answers CSS padding on a Text Block

Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #315097 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    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

     

    #315098 Score: 1
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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?

    This post has received 1 vote up.
    #315099 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

    #315107 Score: 2
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    315 pts
    @timk

    It should be possible to do it the other way round. Instead of adding padding to the <div> you can add a margin to the <p>. That won’t affect the size of the textfield. Both textfields in the screenshot are of the same size in Lectora.

    Tim

    This post has received 2 votes up.
    #315109 Score: 0
    Profile photo of Darrel Somoza
    Darrel Somoza
    Member
    contributor
    friend finder
    beginner
    intermediate
    junior moderator
    advanced
    wise owl
    curious george
    profile
    199 pts
    @Klaatu

    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

     

     

    • This reply was modified 3 years, 6 months ago by Profile photo of Darrel Somoza Darrel Somoza. Reason: uh, I forgot to add the picture
    Attachments:
    #315406 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    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

    #315417 Score: 0
    Profile photo of Tim K
    Tim K
    Member
    contributor
    beginner
    intermediate
    advanced
    friend finder
    junior moderator
    advocate
    wise owl
    curious george
    Group Member
    315 pts
    @timk

    Good morning Peter,

    you can select all <p> tags in divs with a class that contains the substring “ans”:

    div[class*=”ans”] p{
    style info;
    }

    Tim

    #315427 Score: 0
    Profile photo of Peter Jackson
    Peter Jackson
    Member
    beginner
    intermediate
    advanced
    friend finder
    contributor
    junior moderator
    wise owl
    group mod
    entry
    winner
    17 pts
    @pjackson2462

    G’day Tim,

    Thanks again.

    Regards, Peter

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.