É errado para mudar um elemento de bloco para inline com CSS se ele contém outro elemento de bloco?

StackOverflow https://stackoverflow.com/questions/746531

  •  09-09-2019
  •  | 
  •  

Pergunta

Eu sei que é errado colocar um elemento de bloco dentro de um elemento inline, mas que sobre o seguinte?

Imagine essa marcação válida: 

<div><p>This is a paragraph</p></div>

Agora adicione CSS: 

div {
   display:inline;
}

Isso cria uma situação onde um elemento inline contém um elemento de bloco (A div torna-se em linha e o p é bloco por padrão)

Os elementos da página ainda é válido?

Como e quando julgamos se o HTML é válida? - antes ou depois as regras CSS são aplicados

UPDATE: Eu já aprendi que no HTML5 é perfeitamente válido para colocar elementos nível de bloco dentro de tags de link por exemplo: 

<a href="#">
      <h1>Heading</h1>
      <p>Paragraph.</p>
</a>

Este é realmente muito útil se você quiser um grande bloco de HTML para ser um link.

Foi útil?

Solução

A partir da CSS 2.1 Spec :

Quando uma caixa em linha contém uma caixa de nível de bloco em-fluxo, a caixa de linha (e seus antepassados ??embutidos dentro da mesma caixa de linha) são quebradas em volta da caixa do nível de bloco (e de quaisquer irmãos de nível de bloqueio que sejam consecutivos ou separados apenas por espaços em branco dobrável e / ou fora de fluxo de elementos), dividindo a caixa de linha em duas caixas (mesmo que ambos os lados está vazia), um em cada lado da caixa de nível de bloqueio (ES). As caixas de linha antes do intervalo e após o intervalo são colocados em caixas de blocos anônimos, ea caixa de nível de bloco se torna um irmão daquelas caixas anónimos. Quando uma tal caixa em linha é afectado pelo posicionamento relativo, qualquer tradução resultante também afecta a caixa de nível de bloco contido na caixa de linha.

Este modelo seria aplicável no exemplo a seguir se as seguintes regras: 

p    { display: inline }
span { display: block }

foram utilizados com este documento HTML: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HEAD>
  <TITLE>Anonymous text interrupted by a block</TITLE>
</HEAD>
  <BODY>
    <P>
      This is anonymous text before the SPAN.
      <SPAN>This is the content of SPAN.</SPAN>
      This is anonymous text after the SPAN.
    </P>
  </BODY>

O elemento P contém um pedaço (C1) de texto anónimo seguido por um elemento de nível de bloco seguido por um outro pedaço (C2) de texto anónimo. As caixas resultantes seria uma caixa de blocos que representa o corpo, contendo um caixa de bloco anónimo em torno C1, caixa de bloco o SPAN, e um outro bloco caixa anónimo em torno C2.

As propriedades de caixas anónimos são herdados a partir da caixa não anónima vedante (por exemplo, no exemplo abaixo apenas os subsecção designação "caixas", bloco anónimo a uma para DIV). propriedades não-hereditárias têm o seu valor inicial. Por exemplo, a fonte da caixa anônimo é herdada do DIV, mas as margens será 0.

As propriedades definidas em elementos que causam caixas de blocos anônimos para ser gerada ainda se aplicam às caixas e conteúdo desse elemento. Por exemplo, se uma fronteira tinha sido conjunto no elemento P no exemplo acima, a fronteira seria desenhado em torno C1 (aberto no final da linha) e C2 (aberto no início da linha).

Alguns agentes do usuário implementaram fronteiras em inlines contendo blocos de outras formas, por exemplo, por envolvimento tais blocos aninhados dentro de "caixas de linha anônimos" e, assim, desenhar fronteiras em linha em torno de tais caixas. Como CSS1 e CSS2 não definir esse comportamento, CSS1 somente e CSS2 somente os agentes do usuário podem implementar este modelo alternativo e ainda reivindicar conformidade com esta parte do CSS 2.1. Isto não se aplica a UEA desenvolvidas após esta especificação foi lançado.

Faça do que o que você quiser. É evidente que o comportamento é especificado no CSS, embora se cobre todos os casos, ou seja executado de forma consistente em todos os navegadores de hoje não é clara.

Outras dicas

Independentemente se é válido ou não, a estrutura do elemento está errado. A razão que você não colocar elementos de bloco dentro de elementos em linha é para que o navegador pode tornar os elementos de uma forma facilmente previsível.

Mesmo se ele não quebrar nenhuma regra para HTML ou CSS, ainda cria elementos que não podem ser prestados como pretendido. O navegador tem de lidar com os elementos como se o código HTML inválido.

O HTML eo CSS vai ambos ainda ser válido. Idealmente, você não teria que fazer algo assim, mas isso pouco particular de CSS é realmente uma maneira prática (e sintaticamente válido, mas não semanticamente válido) para obter bug dupla margem do Internet Explorer sem recorrer a folhas de estilo condicionais ou hacks que irá invalidar seu CSS. O (X) HTML tem mais valor semântico que a CSS, por isso é menos importante que o CSS é semanticamente válido. Na minha mente, é aceitável porque resolve um problema com o navegador chato sem invalidar seu código.

O HTML é validado independentemente do CSS, para que a página ainda seria válido. Estou bastante certo de que a especificação CSS não diz nada sobre isso também, mas não citar-me sobre isso. No entanto, eu seria muito cuidado usando uma técnica como esta, como, embora possa tornar como pretendido em alguns navegadores, você precisaria de teste 'em all-eu não vejo muitas garantias sendo feitas.

Os elementos da página ainda é válido?

“válido” em um sentido HTML, sim; HTML não sabe nada sobre CSS.

A prestação de você entrar no navegador, no entanto, é ‘indefinido’ pela especificação CSS, por isso poderia ser semelhante a alguma coisa. Enquanto você poderia incluir uma tal regra em hacks CSS destinadas a um determinado navegador (onde você sabe como isso navegador processa neste caso), não deve ser servido para os navegadores em geral.

Eu não sei fora do topo da minha cabeça se isso valida quaisquer regras, mas eu recomendo usar o W3C HTML validador eo W3C CSS Validator para determinar isso. Espero que este seja útil!

Não, não é uma escolha errada. Podemos usar como por exigências.

Se há uma lógica você seguir e você acaba implementá-lo como este, não é errado. coisas de trabalho não são "errado" só porque eles são estranhos. Sim, é bastante incomum, mas ajuda e não é um erro. É intencional. HTML e CSS deve servi-lo, e não o contrário, então não nunca ouvir os comentários dizendo que não fazê-lo só porque ele é feio.

É típico para chamar uma solução "inválido" e sugerir um longo caminho em torno do bloco. Às vezes você pode repensar o que você fez. Mas pode haver muitas razões para o que você fez e eles não considerá-los.

eu faço uso de blocos dentro inlines regularmente É válido e está funcionando -. Não é apenas necessária na maioria dos casos. E daí. Lembra quando XHTML disse-nos para citações sempre colocar ao redor propriedades (e todo mundo gritou com você, se você não fez!), Agora HTML5 permite omitir-los se não há nenhum dentro do espaço. O que aconteceu com aquela última barra depois de marcas singulares? "
"? Vamos. mudança padrões. Mas navegadores continuem apoiando as coisas não-padrão também. CENTRO é preterido; estamos em 2013 e ainda funciona. TABELA para centralização vertical? Às vezes é a única maneira. DIV dentro de A para torná-lo passar como você planejou? Basta ir em frente.

Em foco em coisas importantes.

Eu penso, (x) html é válido, css é válido. É o resultado válido? Sim, se ele está olhando no navegador que você quiser.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top