Почему это не изображение, когда я использую margin-left

Этот вопрос - просто попытаться понять этот пример, и он работает так, как должен. Я установил этот стиль margin:0 0 0 98px; на селектор #sweden dd , и я хочу знать причину, по которой изображение может сохранять свое положение, когда я использую вышеуказанный стиль на #sweden dd. Я имею в виду, когда я использую маржу, которую он использовал, выталкиваем окружающие элементы, поэтому указанное пространство в этом случае может быть помещено между элементом описания (dd) и изображением.Почему это не изображение, когда я использую margin-left

Вот полная разметка и CSS

<!DOCTYPE html> 
<html> 
    <head> 
     <style type="text/css"> 
      body 
      { 
       font-family:Arial, sans-serif; 
       font-size:small; 
       padding:0; 
       margin:0; 
      } 

      #sweden 
      { 
       float:left; 
       width:300px; 
       padding:10px 0; 
       border:2px solid #C8CDD2; 
      } 

      #sweden dl /* block element */ 
      { 
       float:left; 
       margin:10px 20px; 
       padding:0; 
      } 

      #sweden dt /* block element */ 
      { 
       float:right; 
       width:162px; 
       margin:0; 
       padding:0; 
       font-size:130%; 
       letter-spacing:1px; 
       color:#627081; 
       background:blue; 
      } 

      #sweden dd 
      { 
       padding:0; 
       margin:0 0 0 98px; /*Keep text lined up in a column */ 
       font-size:85%; 
       line-height:1.5em; 
       color:#666; 
       background:red; 
      } 

      #sweden dl dd.img 
      { 
       margin:0; 
       padding:0; 
      } 

      #sweden dd.img img 
      { 
       float:left; 
       margin: 0 8px 0 0; 
       padding:4px; 
       border:1px solid #D9E0E6; 
       border-bottom-color:#C8CDD2; 
       border-right-color:#C8CDD2; 
       background:#fff; 
      } 
     </style> 
    <meta charset="utf-8" /> 
    <title>Chapter 3</title> 
    </head> 
    <body> 
    <div id="sweden"> 
      <dl> 
       <dt>Stockholm</dt> 
       <dd class="img"><img src="img/gamlastan.jpg" width="80" height="80" 
        alt="Gamla Stan" /></dd>  
       <dd>This was taken in Gamla Stan. This was taken in Gamla Stan. 
        This was taken in Gamla Stan. This was taken in Gamla Stan. 
        This was taken in Gamla Stan. This was taken in Gamla Stan. 
        This was taken in Gamla Stan. This was taken in Gamla Stan. 
        This was taken in Gamla Stan. This was taken in Gamla Stan. 
        This was taken in Gamla Stan. This was taken in Gamla Stan</dd> 
      </dl> 
     </div> 
    </body> 
</html>

Fiddle here

источник

2013-08-28 user2658578

#sweden dl dd.img

более конкретно fic than

#sweden dd

так что будет применен край первого. Узнайте больше о CSS priority rules, чтобы понять проблему. В этом конкретном случае применяется край первого.

источник

2013-08-28 14:03:04

Нет, вы ошиблись! посмотрите здесь поле для селектора «#sweden dd» будет применяться, но для тех элементов dd, которые имеют класс с указанным img, который существует ниже элемента dl, будет использоваться этот стиль. – user2658578

Нет, я ошибаюсь! посмотрите здесь поле для селектора «#sweden dd» будет применяться, но для тех элементов dd, у которых есть класс = img, который существует ниже элемента dl, будет использоваться этот стиль. Я дома понимаю, что я имею в виду. – user2658578

В обоих случаях dd является потомком #sveden. Первое применяется везде, потому что оно более специфично, чем второе. Второе поле будет перезаписано маркой first в случае, если dd имеет класс img. Таким образом, мы можем с уверенностью сказать, что в случае, когда dd имеет класс img, атрибут margin #sweden dd будет перезаписан атрибутом margin #sweden dl dd.img. –

Правилу маржа в #sweden дд не получает применяется, так как маржа в #sweden дл dd.img является перезапись его и установить его на 0.

источник

2013-08-28 13:50:35

Почему это не изображение, когда я использую margin-left

ответ

Смежные вопросы