Unequal response inside a div

HTML & CSS
1

One problem after another!

I am having problems with the following section of one of my pages. I found that if I delete Content #box4 b { as below from the css some of the lines lineup (attach food2), but not the first one that although is inside the div “tab” does not obey it.

I cannot delete the Content #box4 b { beacuse this stylesheet is used for many other pages and must be there for a reason. So, I’m stuck with attach "food"I tried placing !important in the div tab, but to no avail.

<div id="box4">
<h2> Where to eat in Barcelona</h2>
    
 

       <h4>Gastronomy </h4>
        <p>Being on the coast of the Mediterranean Sea, it is not surprising that seafood is abundant in Barcelona and prominent in many local dishes. </p>
        <br>
        <div class="tab">
        <b>La zarzuela</b>, a combination of various fish and seafood (prawns, mussels, squid); <p>
        <b>Suquet de peix</b>, a soup based on cod; <p>
        <b>Esqueixada de bacall&agrave;</b>, if you prefer a cold salad: cod with pepper and olives. <p>
        <b>Escalivada</b> is made of grilled red peppers and eggplant, marinated in olive oil and garlic, and is excellent with anchovies, or as a relish to tuna dishes; <p>
        </div>
        
        <p>Nevertheless, a lot of traditional fare is based on meat. </p>
        <br>
        <div class="tab">
        <b>Butifarra</b>, a local, spicy, pork sausage; <p>
        <b>Arr&ograve;s a la cassola</b>, a kind of Catalan paella (rice with chicken, onion, tomatoes, garlic, wine, and various aromatic herbs and powders); <p>
        <b>La Pilota</b>, which starts as a dough of bread and eggs, to which are added beef and spices; <p>
        <b>Escudella i carn d&rsquo;olla</b>, a soup with various meats, vegetables, including rice and potatoes.<p>
        </div>
        
            css
          #content #box4 b {
            padding:10px 0 10px 20px;
            }
            
            
            .tab{
                margin-left:20px;
            }
            .tab p{
                margin-left:20px;
                color:red;
            }

595×545 67.8 KB
593×531 66.6 KB

The 2 first lines starting with La zarzuela and butifarra should align with the ones below.

2

Can you show live version of this?

3

http://pintotours.net/Lork/2BAR/tax.html

Thanks megazoid!

4

Ok, the problem is your <p> tags inside div.tab have double margin-left = 20 + 20 = 40px while <b> has only 20px. That because you assign margin twice:

.tab{
    margin-left:20px; // <= first
}
.tab p{
    margin-left:20px; // <= second
    color:red;
}

You can either remove margin from .tab p declaration or wrap your <b> with <p>

5

Brilliant! спасибо!

Now, how do I get the overflow of the lines to have the same padding-left as the beginning of the line?

6

You want to get rid of <b> left padding:

.tab p b {
    padding-left: 0 !important;
}
7

It’s getting there, but not quite.

I tried the .tab p b { with and without a comma in-between the p and the b but no good.

8

You have extra margin again, this time for <b>:

.tab p b {
    margin-left: 20px; // <= here
    padding-left: 0 !important;
}

Remove it, because you want set margin for whole paragraph and not only for bold part of it.
That what you should get:

.tab p {
    margin-left: 20px;
}
.tab p b {
    padding-left: 0 !important;
}
9

Perfect!

I’m ashamed I still need help on something so basic…

many thanks

10

Nobody was born a pro =)

I can recommend you to learn about Chrome DevTools (press F12 in Chrome to open it).
It’s a simple but powerful tool that can easily help you to inspect elements on the page and see where these margins and paddings come from. Spend few minutes to play with that tool, it’s very useful for CSS debugging.

11

Thanks for advice!

12

megazoid

Please ignore post. I found the file I thought I had lost!

13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.