CSS - Margin Padding HTML

Question

CSS - Margin Padding HTML

Navigation

#1 by (3 votes)
#2 by (1 votes)

1

Why does not the white line between the first and second elements respect me? I leave my website: link

The CSS is:

*{
    margin-bottom: 4px;
    margin-top: 4px;
}


#todo{
    width: 750px;
    height: 100px;
    font-family: "Times New Roman";
    font-size: 14;
    margin: auto;
    padding-bottom: 2px;
}


div{
    background-color: #00FFFF;
}


img{
    float: left;
    width: 96px;
    height: 60px;
}


.columna{
    float: left;
    width: 280px;
    padding-left: 5px;
}


.descripcion{
    clear: left;
}

html css

asked by omaza1990 24.11.2016 в 09:54

source

2 answers

1

The solution of @blonfu is correct, I just want to explain how to do it better and easier to maintain.

The <div id="todo"> does not give you a fixed height (I already said that). It is a container of a list so it is better to expand on its own.

To each of the "rungs" in the list, give them a class: <div class="elemento"> and then style all the elements of the list using that class in CSS. In this way, you group all the properties of the row in the class and do not mix it with other existing or future elements of the page.

Example:

.elemento {
   background: color;
   margin-top: 4px;
 }

answered by 24.11.2016 в 15:23

How does a windows form timer work internally? Android: I launch my app with Android Studio on the device and the icon is shown 2 times

score 3 · Accepted Answer

You're setting the blue background to all the div of your page and I guess that does not interest you when your code is more complex. The fact is that you have a div#todo that includes the others and has a height of 100px that is more than the size of the first box so its blue background covers the space between that div and the next.

You can only put the color to the div that you are interested in, an option could be:

#todo > div {
    background-color: #0FF;
}

It does not make much sense that the div#todo has a height, you can delete it.

PS: You should copy the code in your question with the code snippet option because if you correct the web that you have linked, the question and the answers no longer make sense and will not serve anyone else .